<template>
	<view class="problem-detail-container" :class="{ 'dark-mode': isDarkMode }">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<view class="back-button" @click="goBack">
					<text class="iconfont icon-arrow-left"></text>
					<text>返回</text>
				</view>
				<view class="problem-title">{{ problem.problem_no || problem.id }}. {{ problem.title }}</view>
			</view>
			<view class="navbar-right">
				<view class="navbar-action" @click="toggleLanguageSwitch">
					<text class="iconfont icon-language"></text>
					<text>{{ currentDisplayLanguage === 'zh' ? 'EN' : '中' }}</text>
				</view>
				<view class="navbar-action theme-toggle" @click="toggleTheme">
					<text class="theme-icon">{{ isDarkMode ? '☀️' : '🌙' }}</text>
					<text>{{ isDarkMode ? '明亮' : '暗黑' }}</text>
				</view>
				<view class="user-avatar-container">
					<view class="user-avatar" @click="toggleUserMenu">
						<image :src="userAvatar" mode="aspectFill"></image>
					</view>
					<view class="user-menu" v-if="showUserMenu">
						<view class="menu-item" @click="navigateTo('/pages/user/profile')">个人主页</view>
						<view class="menu-item" @click="navigateTo('/pages/user/settings')">设置</view>
						<view class="menu-item" @click="logout">退出</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="problem-content">
			<!-- 左侧题目描述 (60%) -->
			<view class="problem-info">
				<view class="problem-tabs">
					<view class="tab-item" :class="{ active: activeTab === 'description' }"
						@click="changeTab('description')">
						题目描述
					</view>
					<view class="tab-item" :class="{ active: activeTab === 'submission' }"
						@click="changeTab('submission')">
						提交记录
					</view>
				</view>

				<!-- 题目描述内容 -->
				<view class="tab-content description-content" v-show="activeTab === 'description'">
					<view class="problem-header">
						<view class="problem-meta">
							<view class="meta-item">
								<text class="meta-label">时间限制:</text>
								<text>{{ problem.timeLimit }}</text>
							</view>
							<view class="meta-item">
								<text class="meta-label">内存限制:</text>
								<text>{{ problem.memoryLimit }}</text>
							</view>
						</view>
						<view class="problem-tags">
							<text v-for="(tag, index) in problem.tags" :key="index" class="tag">
								{{ tag }}
							</text>
						</view>
					</view>

					<!-- 题目背景部分 -->
					<view class="description-section" v-if="problem.background">
						<view class="section-title">题目背景</view>
						<view class="section-content" v-html="renderMarkdown(problem.background)"></view>
					</view>

					<view class="description-section">
						<view class="section-title">题目描述</view>
						<view class="section-content" v-html="renderMarkdown(problem.description)"></view>
					</view>

					<view class="description-section">
						<view class="section-title">输入</view>
						<view class="section-content" v-html="renderMarkdown(problem.inputDesc)"></view>
					</view>

					<view class="description-section">
						<view class="section-title">输出</view>
						<view class="section-content" v-html="renderMarkdown(problem.outputDesc)"></view>
					</view>

					<!-- 样例处理部分 -->
					<view class="description-section">
						<view class="section-title">样例</view>
						<view class="sample-wrapper" v-for="(sample, index) in problem.samples" :key="index">
							<view class="sample-header">样例 {{ index + 1 }}</view>
							<view class="sample-content">
								<view class="sample-input">
									<view class="sample-label">
										输入：
										<text class="copy-btn" @click="copyText(sample.input)">复制</text>
									</view>
									<pre class="sample-code">{{ sample.input }}</pre>
								</view>
								<view class="sample-output">
									<view class="sample-label">
										输出：
										<text class="copy-btn" @click="copyText(sample.output)">复制</text>
									</view>
									<pre class="sample-code">{{ sample.out }}</pre>
								</view>
							</view>
						</view>
					</view>

					<!-- 题目来源部分 -->
					<view class="description-section" v-if="problem.source">
						<view class="section-title">题目来源</view>
						<view class="section-content">{{ problem.source }}</view>
					</view>

					<view class="description-section" v-if="problem.hint">
						<view class="section-title">提示</view>
						<view class="section-content" v-html="renderMarkdown(problem.hint)"></view>
					</view>
				</view>

				<!-- 提交记录内容 -->
				<view class="tab-content submission-content" v-show="activeTab === 'submission'">
					<view class="submission-list">
						<view class="submission-header">
							<view class="sub-col sub-time">提交时间</view>
							<view class="sub-col sub-status">状态</view>
							<view class="sub-col sub-time-used">时间</view>
							<view class="sub-col sub-memory-used">内存</view>
							<view class="sub-col sub-language">语言</view>
						</view>

						<view v-for="(submission, index) in submissions" :key="index" class="submission-item"
							@click="viewSubmission(submission.id)">
							<view class="sub-col sub-time">{{ submission.time }}</view>
							<view class="sub-col sub-status" :class="getStatusClass(submission.status)">
								{{ submission.status }}
							</view>
							<view class="sub-col sub-time-used">{{ submission.timeUsed }} ms</view>
							<view class="sub-col sub-memory-used">{{ submission.memoryUsed }} KB</view>
							<view class="sub-col sub-language">{{ submission.language }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 右侧代码编辑区 (40%) -->
			<view class="code-editor-section" :class="{ 'dark-mode': isDarkMode }">
				<!-- 编辑器顶部工具栏 -->
				<view class="editor-header">
					<view class="language-selector">
						<picker mode="selector" :range="languages" :value="languageIndex" @change="changeLanguage">
							<view class="language-dropdown">
								<text>C++</text>
								<text class="dropdown-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="editor-actions">
						<view class="editor-action-btn" @click="toggleFullscreen">
							<text>⛶</text>
						</view>
					</view>
				</view>

				<!-- Monaco Editor 容器 -->
				<view class="code-editor-container">
					<!-- #ifdef H5 -->
					<div ref="editorContainer" class="code-editor"></div>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="editor-placeholder">
						代码编辑器仅在H5环境下可用。在App或小程序端，请使用webview嵌入。
					</view>
					<!-- #endif -->
				</view>

				<!-- 完全重构的测试面板HTML布局 -->
				<view class="test-panel" :class="{ 'collapsed': isPanelCollapsed, 'dark-mode': isDarkMode }">
					<!-- 折叠状态 -->
					<view v-if="isPanelCollapsed" class="collapsed-actions">
						<text class="console-label panel-toggle" @click="togglePanel">Console ▲</text>
						<button class="run-btn" @click="runCode">
							<text>▶</text> 运行
						</button>
						<button class="submit-btn" @click="submitCode">
							<text>✓</text> 提交
						</button>
					</view>

					<!-- 展开状态 -->
					<template v-else>
						<view class="panel-header">
							<view class="panel-tabs">
								<view class="panel-tab" :class="{active: activeTestTab === 'case'}"
									@click="activeTestTab = 'case'">测试样例</view>
								<view class="panel-tab" :class="{active: activeTestTab === 'result'}"
									@click="activeTestTab = 'result'">执行结果</view>
							</view>
							<text class="panel-toggle" @click="togglePanel">收起 ▼</text>
						</view>

						<view class="panel-content">
							<!-- 改进的测试用例面板 - 卡片式布局 -->
							<view v-if="activeTestTab === 'case'" class="case-content">
								<view class="case-tabs">
									<view v-for="(testCase, index) in testCases" :key="index" class="case-tab"
										:class="{ active: activeCaseIndex === index }" @click="activeCaseIndex = index">
										Case {{ index + 1 }}
										<text v-if="testCases.length > 1" class="case-tab-delete" @click.stop="deleteTestCase(index)">×</text>
									</view>
									<view class="case-tab add-tab" @click="addTestCase">+</view>
								</view>

								<!-- 修正测试用例输入输出区域 -->
								<view class="case-cards">
									<!-- 输入卡片 -->
									<view class="case-card input-card" :class="{'dark-mode': isDarkMode}">
										<view class="case-card-header">
											<text class="card-title">输入</text>
											<text class="card-copy" @click="copyText(testCases[activeCaseIndex].input)">复制</text>
										</view>
										<view class="case-card-body">
											<textarea class="case-textarea" v-model="testCases[activeCaseIndex].input" 
												placeholder="在此输入测试数据..."></textarea>
										</view>
									</view>

									<!-- 预期输出卡片 -->
									<view class="case-card output-card" :class="{'dark-mode': isDarkMode}">
										<view class="case-card-header">
											<text class="card-title">预期输出</text>
											<text class="card-copy" @click="copyText(testCases[activeCaseIndex].expectedOutput)">复制</text>
										</view>
										<view class="case-card-body">
											<textarea class="case-textarea" v-model="testCases[activeCaseIndex].expectedOutput" 
												placeholder="在此输入预期输出..."></textarea>
										</view>
									</view>
								</view>

								<!-- 删除按钮 -->
								<view v-if="testCases.length > 1" class="case-delete-btn" @click="deleteTestCase(activeCaseIndex)">
									<text>删除</text>
								</view>
							</view>

							<!-- 结果内容保持不变 -->
							<view v-else class="result-area">
								<view v-if="isRunning" class="running-indicator">
									<text>代码执行中...</text>
									<text style="font-size: 12px; margin-top: 8px; opacity: 0.7">请稍候...</text>
								</view>
								
								<view v-else-if="runResult" class="result-container">
									<!-- 结果头部 -->
									<view class="result-header" :class="runResult.success ? 'success' : 'error'">
										<text class="result-status-icon">{{ runResult.success ? '✓' : '✗' }}</text>
										<text class="result-status-text">
											{{ runResult.statusText || (runResult.success ? '执行成功' : '执行失败') }}
										</text>
									</view>
									
									<!-- 输入卡片 -->
									<view class="result-card">
										<view class="result-card-header">
											<text>输入</text>
										</view>
										<view class="result-card-content">
											<pre>{{ runResult.input || '无输入' }}</pre>
										</view>
									</view>
									
									<!-- 输出卡片 -->
									<view class="result-card">
										<view class="result-card-header">
											<text>实际输出</text>
										</view>
										<view class="result-card-content">
											<pre>{{ runResult.output || '无输出' }}</pre>
										</view>
									</view>
									
									<!-- 预期输出卡片 (只在有预期输出且结果不成功时显示) -->
									<view v-if="!runResult.success && runResult.expected" class="result-card">
										<view class="result-card-header">
											<text>预期输出</text>
										</view>
										<view class="result-card-content">
											<pre>{{ runResult.expected }}</pre>
										</view>
									</view>
									
									<!-- 性能指标 -->
									<view class="result-metrics">
										<view class="result-metric">
											<text class="metric-value">{{ runResult.time }} ms</text>
											<text class="metric-label">执行时间</text>
										</view>
										<view class="result-metric">
											<text class="metric-value">{{ runResult.memory }} KB</text>
											<text class="metric-label">内存占用</text>
										</view>
									</view>
								</view>
								
								<!-- 格式错误时添加特殊提示 -->
								<view v-if="runResult && runResult.formatError" class="format-error-tip">
									<view class="format-error-title">
										<text class="format-error-icon">⚠</text>
										<text>输出格式错误</text>
									</view>
									<view class="format-error-content">
										<view class="format-error-list">
											<text>• 多余或缺少的空格、换行符</text>
											<text>• 整数格式不符（如前导零）</text>
											<text>• 输出顺序与要求不符</text>
											<text>• 文件末尾是否需要换行符</text>
										</view>
									</view>
								</view>
								
								<view v-else class="no-result-indicator">
									<text>暂无执行结果</text>
									<text style="font-size: 12px; margin-top: 8px; opacity: 0.7">点击"运行"按钮执行代码</text>
								</view>
							</view>
						</view>

						<!-- 确保控制台栏总是显示在底部 -->
						<view class="console-bar">
							<view class="console-label">
								<text>Console</text>
							</view>
							<view class="console-actions">
								<button class="run-btn" @click="runCode">
									<text>▶</text> 运行
								</button>
								<button class="submit-btn" @click="submitCode">
									<text>✓</text> 提交
								</button>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<!-- 提交详情模态框 -->
		<view v-if="showSubmissionModal" class="submission-modal-overlay" @click="closeSubmissionModal">
		  <view class="submission-modal" @click.stop>
		    <view class="modal-header">
		      <view class="modal-title">提交详情 #{{ currentSubmission.id }}</view>
		      <view class="modal-close" @click="closeSubmissionModal">×</view>
		    </view>
		    
		    <view class="modal-content">
		      <view class="submission-info">
		        <view class="submission-status" :class="getStatusClass(currentSubmission.status)">
		          {{ currentSubmission.status }}
		        </view>
		        <view class="submission-meta">
		          <view class="meta-item">
		            <text class="meta-label">提交时间:</text>
		            <text>{{ currentSubmission.time }}</text>
		          </view>
		          <view class="meta-item">
		            <text class="meta-label">语言:</text>
		            <text>{{ currentSubmission.language }}</text>
		          </view>
		          <view class="meta-item">
		            <text class="meta-label">执行时间:</text>
		            <text>{{ currentSubmission.timeUsed }} ms</text>
		          </view>
		          <view class="meta-item">
		            <text class="meta-label">内存占用:</text>
		            <text>{{ currentSubmission.memoryUsed }} KB</text>
		          </view>
		        </view>
		      </view>
		      
		      <!-- 如果未通过，显示测试点通过情况 -->
		      <view v-if="!isAccepted(currentSubmission.status)" class="test-cases-summary">
		        <view class="test-cases-header">测试点通过情况</view>
		        <view class="test-cases-progress">
		          <view class="progress-bar">
		            <view 
		              class="progress-fill" 
		              :style="{width: (currentSubmission.passedCases / currentSubmission.totalCases * 100) + '%'}"
		            ></view>
		          </view>
		          <text class="progress-text">
		            {{ currentSubmission.passedCases }}/{{ currentSubmission.totalCases }}
		          </text>
		        </view>
		        
		        <view class="test-cases-list">
		          <view 
		            v-for="(testCase, index) in currentSubmission.testCases" 
		            :key="index"
		            class="test-case-item"
		            :class="{'passed': testCase.passed}"
		          >
		            <text class="case-number">测试点 {{ index + 1 }}</text>
		            <text class="case-status">{{ testCase.passed ? '通过' : '失败' }}</text>
		            <text v-if="!testCase.passed" class="case-reason">{{ testCase.reason }}</text>
		          </view>
		        </view>
		      </view>
		      
		      <!-- 提交的代码 -->
		      <view class="submission-code">
		        <view class="code-header">提交的代码</view>
		        <view class="code-container">
		          <pre><code>{{ currentSubmission.code }}</code></pre>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>

		<!-- 添加全局复制按钮 -->
		<view class="copy-all-btn" @click="copyAllContent">复制全部内容</view>
	</view>
</template>

<script>
	// #ifdef H5
	import loader from '@monaco-editor/loader';
	// #endif

	// 导入toRaw以修复卡死问题
	import { toRaw } from 'vue';
	import { getThemeMode, setThemeMode } from '@/utils/themeManager.js';
	// 导入Markdown解析库
	import { marked } from 'marked';

	// 直接展示数学公式的简单渲染器
	const renderer = new marked.Renderer();

	// 修改配置以支持数学公式
	marked.setOptions({
	  renderer: renderer,
	  breaks: true,
	  gfm: true,
	  mangle: false,
	  headerIds: false,
	  silent: true
	});

	// MathJax配置函数
	function configureMathJax() {
	  // #ifdef H5
	  if (window.MathJax && typeof window.MathJax.typeset === 'function') {
	    console.log('MathJax已经加载完成，无需重新配置');
	    return Promise.resolve();
	  }
	  
	  return new Promise((resolve, reject) => {
	    try {
	      console.log('开始配置MathJax...');
	      // 创建MathJax配置
	      window.MathJax = {
	        tex: {
	          inlineMath: [['$', '$']],
	          displayMath: [['$$', '$$']],
	          processEscapes: true,
	          processEnvironments: true,
	          processRefs: true
	        },
	        options: {
	          skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
	          renderActions: {
	            findScript: [10, function (doc) {
	              for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
	                const display = !!node.type.match(/; *mode=display/);
	                const math = new doc.options.MathItem(
	                  node.textContent,
	                  doc.inputJax[0],
	                  display
	                );
	                const text = document.createTextNode('');
	                node.parentNode.replaceChild(text, node);
	                math.start = {node: text, delim: '', n: 0};
	                math.end = {node: text, delim: '', n: 0};
	                doc.math.push(math);
	              }
	            }, '']
	          }
	        },
	        startup: {
	          pageReady: () => {
	            console.log('MathJax页面准备就绪');
	            resolve();
	          }
	        },
	        svg: {
	          fontCache: 'global'
	        }
	      };
	      
	      console.log('正在加载MathJax脚本...');
	      // 加载MathJax脚本
	      const script = document.createElement('script');
	      script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js'; // 使用SVG渲染器
	      script.async = true;
	      script.onerror = (e) => {
	        console.error('MathJax加载失败:', e);
	        // 尝试使用备用CDN
	        const backupScript = document.createElement('script');
	        backupScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-svg.min.js';
	        backupScript.async = true;
	        backupScript.onerror = reject;
	        backupScript.onload = () => {
	          console.log('MathJax从备用CDN加载成功');
	          resolve();
	        };
	        document.head.appendChild(backupScript);
	      };
	      script.onload = () => {
	        console.log('MathJax脚本加载成功');
	      };
	      document.head.appendChild(script);
	    } catch (error) {
	      console.error('MathJax配置过程出错:', error);
	      reject(error);
	    }
	  });
	  // #endif
	  
	  // #ifndef H5
	  return Promise.resolve();
	  // #endif
	}

	export default {
		data() {
			return {
				problem: {
					id: '',
					problem_no: '',
					title: '',
					difficulty: '',
					timeLimit: '',
					memoryLimit: '',
					tags: [],
					description: '',
					inputDesc: '',
					outputDesc: '',
					samples: [],
					hint: ''
				},
				activeTab: 'description', // 'description' or 'submission'
				submissions: [ // 示例数据
					{	id: 1,	time: '2023-05-01 14:30',	status: 'AC',	timeUsed: 32,	memoryUsed: 4356,	language: 'C++'},
					{	id: 2,	time: '2023-05-01 14:15',	status: 'WA',	timeUsed: 28,	memoryUsed: 4120,	language: 'C++'},
					{	id: 3,	time: '2023-05-01 14:00',	status: 'TLE',	timeUsed: 1000,	memoryUsed: 4200,	language: 'C++'}
				],
				languages: ['C++'], // 支持的语言列表
				languageIndex: 0, // 当前选中的语言索引
				monacoLanguageMap: { // Monaco Editor 语言标识符映射
					'C++': 'cpp',	'Java': 'java',	'Python': 'python',	'JavaScript': 'javascript'
				},
				editor: null, // Monaco Editor 实例
				monacoInstance: null, // Monaco API 实例 (由 loader 返回)
				userAvatar: '/static/tx_mag/l.png', // 示例头像路径
				showUserMenu: false,
				isDarkMode: false,
				currentDisplayLanguage: 'zh', // 界面语言 'zh' / 'en'
				codeTemplates: { // 不同语言的代码模板
					'C++': '#include <iostream>\n\nint main() {\n    // 请在此处编写代码\n    return 0;\n}',
					'Java': 'import java.util.*;\n\npublic class Main {\n    public static void main(String[] args) {\n        // 请在此处编写代码\n    }\n}',
					'Python': '# 请在此处编写代码\n',
					'JavaScript': '// 请在此处编写代码\n'
				},
				isPanelCollapsed: false, // 测试面板是否折叠
				activeTestTab: 'case', // 'case' or 'result'
				activeCaseIndex: 0,
				testCases: [
					{ input: '', expectedOutput: '' } // 初始空用例
				],
				isRunning: false, // 是否正在执行代码
				runResult: null, // 上次自测运行结果
				lastRunTime: 0, // 上次运行时间戳
				runCooldown: 1000, // 运行冷却时间(ms)
				activeIOTab: 'input', // 当前活跃IO标签：input或output
				isSubmitting: false, // 添加提交状态
				showSubmissionModal: false, // 是否显示提交详情模态框
				currentSubmission: null // 当前提交详情
			};
		},
		computed: {
			currentLanguage() {
				return this.languages[this.languageIndex];
			},
			currentMonacoLanguage() {
				return this.monacoLanguageMap[this.currentLanguage] || 'plaintext';
			}
		},
		// #ifdef H5
		mounted() {
			// 读取保存的主题
			try {
				const savedDarkMode = uni.getStorageSync('isDarkMode');
				if (savedDarkMode !== '') {
					this.isDarkMode = savedDarkMode === true || savedDarkMode === 'true';
					if (this.isDarkMode) {
						document.body.classList.add('dark-mode');
						
						// 更新测试面板的类
						this.$nextTick(() => {
							const testPanel = document.querySelector('.test-panel');
							if (testPanel) {
								testPanel.classList.add('dark-mode');
							}
						});
					}
				}
			} catch(e) {
				console.error('读取主题设置失败', e);
			}
			
			// 加载MathJax脚本
			configureMathJax().then(() => {
				console.log('MathJax配置完成，初始化成功');
				// MathJax加载成功后，在题目加载完成时会自动调用renderMathJax
			}).catch(error => {
				console.error('MathJax加载失败:', error);
				// 即使MathJax加载失败，我们仍然使用基本的渲染方式显示公式
				uni.showToast({
					title: '数学公式渲染库加载失败',
					icon: 'none',
					duration: 2000
				});
			});
			
			this.$nextTick(() => {
				this.initMonacoEditor();
			});
			document.addEventListener('click', this.closeMenuOnClickOutside);
			this.loadExampleCases();
		},
		beforeDestroy() {
			// 取消任何进行中的请求
			if (this.runTimeoutId) {
				clearTimeout(this.runTimeoutId);
			}
			
			try {
				if (this.editor) {
					// 清理编辑器
					this.editor.dispose();
					this.editor = null;
				}
				// 移除任何全局事件监听器
				window.removeEventListener('resize', this.handleResize);
			} catch (e) {
				console.error('清理资源时出错:', e);
			}
			
			// 确保加载提示被清除
			uni.hideLoading();
		},
		// #endif
		onLoad(options) {
			// 获取题目ID
			if (options.id) {
				this.loadProblemDetail(options.id);
			}
			
			// 初始化主题设置
			this.isDarkMode = getThemeMode();
			
			// 监听全局主题变更
			uni.$on('global-theme-changed', (isDark) => {
				this.isDarkMode = isDark;
			});
		},
		onUnload() {
			// 取消监听
			uni.$off('global-theme-changed');
		},
		methods: {
			// #ifdef H5
			// --- Monaco Editor Methods (H5 Only) ---
			initMonacoEditor() {
				const container = this.$refs.editorContainer;
				if (!container) {
					console.error('Monaco Editor container not found.');
					return;
				}
				
				// 使用setTimeout避免初始化时阻塞UI
				setTimeout(() => {
					loader.init().then(monaco => {
						this.monacoInstance = monaco;
						
						// 尝试获取已保存的代码
						let savedCode = '';
						try {
							const key = `code_${this.problem.id}_${this.currentLanguage}`;
							const saved = uni.getStorageSync(key);
							if (saved) savedCode = saved;
						} catch (e) {}
						
						// 获取初始代码
						const code = savedCode || this.codeTemplates[this.currentLanguage] || '';
						
						try {
							// 创建编辑器
							this.editor = monaco.editor.create(container, {
								value: code,
								language: this.currentMonacoLanguage,
								theme: this.isDarkMode ? 'vs-dark' : 'vs',
								lineNumbers: 'on',
								automaticLayout: false, // 改为false, 使用手动布局
								minimap: { enabled: false },
								fontSize: 14,
								tabSize: 4, 
								insertSpaces: true,
								scrollBeyondLastLine: false, 
								wordWrap: 'on'
							});
							
							// 使用debounce进行内容变更保存
							let saveTimeout = null;
							this.editor.onDidChangeModelContent(() => {
								if (saveTimeout) clearTimeout(saveTimeout);
								saveTimeout = setTimeout(() => {
									this.saveCode();
								}, 500);
							});
							
							// 手动调整一次布局
							setTimeout(() => {
								if (this.editor) {
									try {
										const rawEditor = toRaw(this.editor);
										rawEditor.layout();
	  } catch (e) {
										console.error('初始布局失败', e);
									}
								}
							}, 100);
							
							console.log('Monaco Editor initialized successfully.');
						} catch (error) {
							console.error('Failed to create Monaco Editor instance:', error);
							container.innerHTML = '<p style="color: red; padding: 10px;">代码编辑器加载失败。</p>';
						}
					}).catch(error => {
						console.error('Failed to load Monaco Editor:', error);
						container.innerHTML = '<p style="color: red; padding: 10px;">代码编辑器加载失败。</p>';
					});
				}, 100);
			},
			destroyMonacoEditor() {
				if (this.editor) {
					try {
						// 清理相关的事件监听器
						if (this.editor._codeEditorService) {
							this.editor._codeEditorService.disposeCodeEditor(this.editor);
						}
						
						// 调用dispose销毁编辑器
						this.editor.dispose();
						this.editor = null;
						
						// 如果有模型，也需要销毁
						if (this.editorModel && this.monacoInstance) {
							this.editorModel.dispose();
							this.editorModel = null;
						}
					} catch (e) {
						console.error('Error disposing Monaco editor:', e);
					}
				}
				
				// 移除事件监听器
				document.removeEventListener('click', this.closeMenuOnClickOutside);
				
				console.log('Editor resources cleaned up');
			},
			getCode() {
				if (!this.editor) return '';
				
				try {
					// 使用toRaw访问原始编辑器对象，避免Vue3响应式系统的干扰
					const rawEditor = toRaw(this.editor);
					return rawEditor.getValue();
				} catch (e) {
					console.error('获取代码失败', e);
					return '';
				}
			},
			// updateEditorOptions 主要负责非语言切换的选项更新，例如主题
			updateEditorOptions() {
				if (this.editor && this.monacoInstance) {
					// !! 注意：语言切换逻辑移至 changeLanguage 方法 !!
					// this.monacoInstance.editor.setModelLanguage(this.editor.getModel(), this.currentMonacoLanguage);
					this.monacoInstance.editor.setTheme(this.isDarkMode ? 'vs-dark' : 'vs');
					console.log(`Editor theme updated to: ${this.isDarkMode ? 'vs-dark' : 'vs'}`);
				}
			},
			// #endif

			// --- General Methods ---
			goBack() { uni.navigateBack(); },

			changeLanguage(e) {
				const newIndex = parseInt(e.detail.value, 10);
				if (newIndex === this.languageIndex) { return; }

				console.log(`Attempting to change language index from ${this.languageIndex} to ${newIndex}`);
				this.languageIndex = newIndex;

				// #ifdef H5
				if (this.editor && this.monacoInstance) {
					const newCode = this.codeTemplates[this.currentLanguage] || '';
					const targetLanguage = this.currentMonacoLanguage; // 先获取目标语言ID

					console.log(`Setting editor value for language: ${this.currentLanguage}`);
					// 1. 先设置代码内容
					this.editor.setValue(newCode);

					// --- 关键改动：使用 setTimeout 延迟设置语言 ---
					console.log(`Scheduling setModelLanguage to: ${targetLanguage}`);
					setTimeout(() => {
						try {
							// 在 setTimeout 回调中再次检查实例是否存在
							if (this.monacoInstance && this.editor && this.editor.getModel()) {
								console.log(`Executing setModelLanguage to: ${targetLanguage}`);
								// 2. 延迟后设置语言模式
								this.monacoInstance.editor.setModelLanguage(this.editor.getModel(), targetLanguage);
								console.log(`Successfully set model language to: ${targetLanguage}`);

								// (可选) 强制布局更新，确保渲染正确
								this.$nextTick(() => {
									if (this.editor) { this.editor.layout(); }
								});
							} else {
								console.warn('Editor or Monaco instance became invalid before language could be set.');
							}
						} catch (error) {
							console.error(`Error setting model language to ${targetLanguage}:`, error);
							uni.showToast({ title: '切换语言时出错', icon: 'error' });
						}
					}, 50);
					// --- 改动结束 ---

				} else {
					console.warn('changeLanguage: Editor or Monaco instance not ready.');
				}
				// #endif
				// #ifndef H5
				console.log('Language change logic skipped: Not in H5 environment.');
				// 在非 H5 环境下可以执行其他逻辑，比如更新一个简单的 textarea 的内容
				// #endif
			},

			resetCode() {
				// #ifdef H5
				if (this.editor && this.monacoInstance) { // 同样检查 monacoInstance
					const template = this.codeTemplates[this.currentLanguage] || '';
					const currentMonacoLang = this.currentMonacoLanguage;

					// 1. 设置代码模板
					this.editor.setValue(template);

					// --- 关键改动：重置时也延迟设置语言，确保一致性 ---
					setTimeout(() => {
						try {
							if (this.monacoInstance && this.editor && this.editor.getModel()) {
								this.monacoInstance.editor.setModelLanguage(this.editor.getModel(), currentMonacoLang);
								console.log(`Language reset to: ${currentMonacoLang}`);
								this.$nextTick(() => { if (this.editor) this.editor.layout(); });
							}
						} catch (error) {
							console.error(`Error resetting model language to ${currentMonacoLang}:`, error);
						}
					}, 50);
					// --- 改动结束 ---

					uni.showToast({ title: '代码已重置', icon: 'none' });
				} else {
					uni.showToast({ title: '编辑器未初始化', icon: 'error' });
				}
				// #endif
				// #ifndef H5
				uni.showToast({ title: '功能仅在H5可用', icon: 'none' });
				// #endif
			},

			toggleTheme() {
				this.isDarkMode = !this.isDarkMode;
				setThemeMode(this.isDarkMode);
				
				// 立即应用到body
				if (this.isDarkMode) {
					document.body.classList.add('dark-mode');
					// 强制更新组件
					this.$nextTick(() => {
						// 更新测试面板的类
						const testPanel = document.querySelector('.test-panel');
						if (testPanel) {
							testPanel.classList.add('dark-mode');
						}
						
						// 更新编辑器主题
						setTimeout(() => {
							if (this.editor) {
								try {
									const rawEditor = toRaw(this.editor);
									rawEditor.updateOptions({
										theme: 'vs-dark'
									});
								} catch (e) {
									console.error('更新主题失败', e);
								}
							}
						}, 50);
					});
				} else {
					document.body.classList.remove('dark-mode');
					// 强制更新组件
					this.$nextTick(() => {
						// 更新测试面板的类
						const testPanel = document.querySelector('.test-panel');
						if (testPanel) {
							testPanel.classList.remove('dark-mode');
						}
						
						// 更新编辑器主题
						setTimeout(() => {
							if (this.editor) {
								try {
									const rawEditor = toRaw(this.editor);
									rawEditor.updateOptions({
										theme: 'vs'
									});
								} catch (e) {
									console.error('更新主题失败', e);
								}
							}
						}, 50);
					});
				}
				
				// 保存主题设置
				uni.setStorageSync('isDarkMode', this.isDarkMode);
				
				// 切换主题后，重新渲染MathJax
				// 增加等待时间，确保DOM更新完成
				const waitTime = 500;
				console.log(`等待${waitTime}ms后渲染MathJax...`);
				
				setTimeout(() => {
					try {
						// 首先检查MathJax是否加载完成
						if (window.MathJax && typeof window.MathJax.typeset === 'function') {
							console.log('主题切换后开始渲染MathJax');
							this.renderMathJax();
						} else {
							console.log('MathJax尚未加载，尝试重新配置...');
							// 如果MathJax未加载，尝试重新配置
							configureMathJax().then(() => {
								console.log('MathJax重新配置成功，开始渲染');
								this.renderMathJax();
							}).catch(error => {
								console.error('MathJax重新配置失败:', error);
							});
						}
					} catch (error) {
						console.error('主题切换渲染MathJax错误:', error);
					}
				}, waitTime);
			},

			runCode() {
				// 切换到执行结果选项卡
				this.activeTestTab = 'result';
				
				// 设置运行状态
				this.isRunning = true;
				this.runResult = null; // 重置之前的结果
				
				// 获取当前测试用例
				const currentCase = this.testCases[this.activeCaseIndex] || { input: '', expectedOutput: '' };
				
				// 模拟代码运行
				setTimeout(() => {
					// 生成随机结果
					const isSuccess = Math.random() > 0.5;
					
					this.runResult = {
						success: isSuccess,
						statusText: isSuccess ? '答案正确' : '运行时错误',
						input: currentCase.input || '无输入',
						output: isSuccess ? (currentCase.input ? `${parseInt(currentCase.input) + 1}` : '1') : 'Runtime Error',
						expected: currentCase.expectedOutput || null,
						time: Math.floor(Math.random() * 200),
						memory: Math.floor(Math.random() * 3000) + 1000
					};
					
					this.isRunning = false;
				}, 1000);
			},

			submitCode() {
				if (this.isSubmitting) return;
				
				this.isSubmitting = true;
				const code = this.getCode();
				
				// 显示加载提示
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				
				// 模拟提交过程
				setTimeout(() => {
					uni.hideLoading();
					this.isSubmitting = false;
					
					// 随机返回不同结果，包括格式错误
					const resultType = Math.floor(Math.random() * 5);
					
					if (resultType === 0) {
						// 格式错误情况
						this.activeTestTab = 'result';
						this.runResult = {
							success: false,
							statusCode: 'PE',
							statusText: '格式错误',
							input: this.testCases[0].input || '示例输入数据',
							output: "1\n2\n3",
							expected: "1 2 3",
							time: 12,
							memory: 2048,
							formatError: true
						};
						uni.showToast({
							title: '提交结果：格式错误',
							icon: 'none'
						});
					} else if (resultType === 1) {
						// 答案错误
						this.activeTestTab = 'result';
						this.runResult = {
							success: false,
							statusCode: 'WA',
							statusText: '答案错误',
							input: this.testCases[0].input || '示例输入数据',
							output: "10",
							expected: "5",
							time: 56,
							memory: 4128
						};
						uni.showToast({
							title: '提交结果：答案错误',
							icon: 'none'
						});
					} else {
						// 通过
						this.activeTestTab = 'result';
						this.runResult = {
							success: true,
							statusCode: 'AC',
							statusText: '通过',
							input: this.testCases[0].input || '示例输入数据',
							output: "正确输出",
							time: 32,
							memory: 3256
						};
						uni.showToast({
							title: '提交通过！',
							icon: 'success'
						});
					}
					
				}, 1500);
			},

			viewSubmission(submissionId) {
				// 实际项目中应该通过API获取提交详情
				// 这里使用模拟数据
				const submission = this.submissions.find(s => s.id === submissionId);
				
				if (submission) {
					// 补充额外信息，模拟API返回
					this.currentSubmission = {
						...submission,
						code: `#include <iostream>\nusing namespace std;\n\nint main() {\n  int n;\n  cin >> n;\n  cout << n + 1 << endl;\n  return 0;\n}`,
						totalCases: 10,
						passedCases: submission.status === 'Accepted' ? 10 : Math.floor(Math.random() * 10),
						testCases: Array(10).fill().map((_, i) => {
							const passed = submission.status === 'Accepted' || Math.random() > 0.5;
							return {
								passed,
								reason: passed ? '' : ['时间超限', '运行错误', '答案错误', '内存超限'][Math.floor(Math.random() * 4)]
							};
						})
					};
					
					this.showSubmissionModal = true;
				}
			},

			toggleUserMenu(event) {
				// #ifdef H5
				if (event) event.stopPropagation();
				// #endif
				this.showUserMenu = !this.showUserMenu;
			},

			closeMenuOnClickOutside(event) {
				// #ifdef H5
				const userMenuElement = this.$el?.querySelector('.user-avatar-container');
				if (this.showUserMenu && userMenuElement && !userMenuElement.contains(event.target)) {
					this.showUserMenu = false;
				}
				// #endif
			},

			navigateTo(path) {
				this.showUserMenu = false;
				uni.navigateTo({ url: path });
			},

			logout() {
				this.showUserMenu = false;
				uni.showModal({
					title: '提示', content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							uni.reLaunch({ url: '/pages/login/index' });
						}
					}
				});
			},

			toggleLanguageSwitch() {
				this.currentDisplayLanguage = this.currentDisplayLanguage === 'zh' ? 'en' : 'zh';
				uni.showToast({
					title: `界面语言切换为 ${this.currentDisplayLanguage === 'zh' ? '中文' : 'English'}`,
					icon: 'none'
				});
				// 这里可以加入 i18n 国际化切换逻辑
			},

			copyText(text) {
				if (!text) {
					uni.showToast({
						title: '无内容可复制',
						icon: 'none'
					});
					return;
				}
				
				// #ifdef H5
				const input = document.createElement('textarea');
				input.value = text;
				document.body.appendChild(input);
				input.select();
				document.execCommand('copy');
				document.body.removeChild(input);
				
				uni.showToast({
					title: '已复制到剪贴板',
					icon: 'success',
					duration: 1500
				});
				// #endif
				
				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'success'
						});
					}
				});
				// #endif
			},

			togglePanel() {
				this.isPanelCollapsed = !this.isPanelCollapsed;
				
				// 使用nextTick和toRaw更新编辑器布局
				this.$nextTick(() => {
					setTimeout(() => {
						if (this.editor) {
							try {
								const rawEditor = toRaw(this.editor);
								rawEditor.layout();
							} catch (e) {
								console.error('更新布局失败', e);
							}
						}
					}, 300);
				});
			},

			addTestCase() {
				this.testCases.push({ input: '', expectedOutput: '' });
				this.activeCaseIndex = this.testCases.length - 1;
			},

			deleteTestCase(index) {
				if (this.testCases.length <= 1) {
					uni.showToast({ 
						title: '至少需要保留一个测试用例', 
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				// 删除前询问确认
				uni.showModal({
					title: '删除确认',
					content: `确定要删除测试用例 ${index + 1} 吗？`,
					success: (res) => {
						if (res.confirm) {
							this.testCases.splice(index, 1);
							
							// 如果删除当前选中的用例，则选择前一个或第一个
							if (this.activeCaseIndex >= this.testCases.length) {
								this.activeCaseIndex = this.testCases.length - 1;
							}
							
							uni.showToast({
								title: '删除成功',
								icon: 'success',
								duration: 1000
							});
						}
					}
				});
			},

			showFormatError() {
				this.activeTestTab = 'result';
				this.runResult = {
					success: false,
					input: this.testCases[this.activeCaseIndex]?.input || '',
					output: "输出格式错误：预期结尾应该有换行符",
					expected: "如果你看到这个错误，请检查输出格式是否符合要求。通常换行符、空格或整数格式可能有问题。",
					time: 45,
					memory: 4356
				};
			},

			getStatusClass(status) {
				const lowerStatus = status.toLowerCase();
				if (lowerStatus === 'ac') return 'status-ac';
				if (lowerStatus === 'wa') return 'status-wa';
				if (['tle', 'mle', 'ole'].includes(lowerStatus)) return 'status-tle';
				if (['re', 'ce'].includes(lowerStatus)) return 'status-re';
				return '';
			},

			// 添加手动触发编辑器布局更新的方法
			updateEditorLayout() {
				if (this.editor && typeof this.editor.layout === 'function') {
					try {
						this.editor.layout();
					} catch (e) {}
				}
			},

			// 添加代码保存方法
			saveCode() {
				if (!this.editor) return;
				
				try {
					const rawEditor = toRaw(this.editor);
					const code = rawEditor.getValue();
					const key = `code_${this.problem.id}_${this.currentLanguage}`;
					uni.setStorageSync(key, code);
				} catch (e) {
					console.error('保存代码失败', e);
				}
			},

			// 加载题目提供的样例数据
			loadExampleCases() {
				if (this.problem && this.problem.examples && this.problem.examples.length > 0) {
					// 替换现有测试用例
					this.testCases = this.problem.examples.map(example => ({
						input: example.input || '',
						expectedOutput: example.output || ''
					}));
				}
			},

			// 应用主题到body和Monaco编辑器
			applyTheme() {
				// 应用到body
				if (this.isDarkMode) {
					document.body.classList.add('dark-mode');
				} else {
					document.body.classList.remove('dark-mode');
				}
				
				// 应用到编辑器
				setTimeout(() => {
					if (this.editor) {
						try {
							const rawEditor = toRaw(this.editor);
							rawEditor.updateOptions({
								theme: this.isDarkMode ? 'vs-dark' : 'vs'
							});
						} catch (e) {
							console.error('更新主题失败', e);
						}
					}
				}, 10);
			},

			isAccepted(status) {
				return status === 'Accepted';
			},

			closeSubmissionModal() {
				this.showSubmissionModal = false;
				this.currentSubmission = null;
			},

			// 加载题目详情
			loadProblemDetail(id) {
				// 显示加载提示
				uni.showLoading({
					title: '加载中...'
				});
				
				// 使用原API调用代码
				uni.request({
					url: `http://59.110.32.186:5000/problem/${id}`,
					method: 'GET',
					success: (res) => {
						console.log('题目详情API响应:', res);
						if (res.statusCode === 200 && res.data) {
							// 更新题目数据，添加默认值防止undefined
							this.problem = {
								id: res.data.id || '',
								problem_no: res.data.problem_no || '',
								title: res.data.title || '',
								difficulty: res.data.difficulty || '',
								timeLimit: (res.data.time_limit || '') + 'ms',
								memoryLimit: (res.data.memory_limit || '') + 'MB',
								tags: res.data.tags || [],
								description: res.data.description || '',
								inputDesc: res.data.input_description || '',
								outputDesc: res.data.output_description || '',
								samples: res.data.samples || [],
								hint: res.data.hint || '',
								background: res.data.background || '',
								source: res.data.source || ''
							};
							
							// 延迟一下再渲染MathJax，确保DOM已经更新
							setTimeout(() => {
								this.renderMathJax();
							}, 300);
						} else {
							// 错误处理
							uni.showToast({
								title: '题目加载失败',
								icon: 'none'
							});
							console.error('题目加载失败:', res);
							
							// 加载失败时使用测试数据
							this.loadTestData();
						}
					},
					fail: (err) => {
						// 错误处理
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
						console.error('网络请求失败:', err);
						
						// 网络请求失败时使用测试数据
						this.loadTestData();
					},
					complete: () => {
						// 隐藏加载提示
						uni.hideLoading();
					}
				});
			},

			// 加载测试数据方法
			loadTestData() {
				console.log('加载测试数据');
				this.problem = {
					id: 'test-math',
					problem_no: 'M-101',
					title: '数学公式渲染测试',
					difficulty: '中等',
					timeLimit: '1000ms',
					memoryLimit: '256MB',
					tags: ['数学', '测试', '公式'],
					description: `这是一个测试数学公式渲染的问题。以下是一些常见的数学公式：

### 行内公式测试
质能方程 $E = mc^2$ 是爱因斯坦提出的。

圆的面积公式是 $S = \\pi r^2$，其中 $r$ 是圆的半径。

二次方程 $ax^2 + bx + c = 0$ 的解为 $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$。

### 块级公式测试
欧拉公式：

$$e^{i\\pi} + 1 = 0$$

Maxwell方程组：

$$\\nabla \\times \\vec{E} = -\\frac{\\partial \\vec{B}}{\\partial t}$$

$$\\nabla \\times \\vec{H} = \\vec{J} + \\frac{\\partial \\vec{D}}{\\partial t}$$

$$\\nabla \\cdot \\vec{D} = \\rho$$

$$\\nabla \\cdot \\vec{B} = 0$$

### 复杂公式测试
傅里叶变换：

$$F(\\omega) = \\int_{-\\infty}^{\\infty} f(t) e^{-i\\omega t} dt$$

泰勒展开：

$$f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!} (x-a)^n$$

高斯定理：

$$\\oint_S \\vec{F} \\cdot d\\vec{S} = \\int_V \\nabla \\cdot \\vec{F} dV$$

拉普拉斯变换：

$$F(s) = \\int_{0}^{\\infty} f(t) e^{-st} dt$$

### 矩阵公式测试
矩阵乘法：

$$\\begin{bmatrix} a & b \\\\ c & d \\end{bmatrix} \\begin{bmatrix} e & f \\\\ g & h \\end{bmatrix} = \\begin{bmatrix} ae+bg & af+bh \\\\ ce+dg & cf+dh \\end{bmatrix}$$

### 分数和上下标测试
复杂分数：

$$\\frac{1}{\\frac{1}{a} + \\frac{1}{b}} = \\frac{ab}{a+b}$$

多重上下标：

$$x^{y^z} = x^{(y^z)}$$

$$a_{i,j}^{k,l} = \\sum_{m=0}^{\\infty} b_{i,m}^{k} c_{m,j}^{l}$$`,
					inputDesc: '这是输入描述。包含公式 $n \\leq 10^5$。',
					outputDesc: '这是输出描述。计算 $\\sum_{i=1}^{n} i^2$ 的值。',
					samples: [
						{
							input: '3',
							output: '14'
						}
					],
					hint: `请注意以下数学概念：

1. 求和符号：$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$
2. 极限：$\\lim_{x \\to 0} \\frac{\\sin x}{x} = 1$
3. 积分：$\\int_{a}^{b} f(x) dx$
4. 导数：$\\frac{d}{dx}[\\sin(x)] = \\cos(x)$

复杂的公式组合：

$$P(A|B) = \\frac{P(B|A)P(A)}{P(B|A)P(A) + P(B|\\neg A)P(\\neg A)}$$`,
					background: '这是一道测试数学公式渲染的问题，包含多种常见的数学符号和表达式。',
					source: '数学公式渲染测试'
				};
				
				// 延迟一下再渲染MathJax，确保DOM已经更新
				setTimeout(() => {
					this.renderMathJax();
				}, 300);
			},

			// 渲染Markdown文本为HTML
			renderMarkdown(text) {
				if (!text) return '';
				
				try {
					// 使用marked渲染Markdown
					let html = marked.parse(text);
					
					// 为MathJax创建一个包裹元素，增加唯一类名以便精确定位
					const uniqueClass = 'math-content-' + Math.random().toString(36).substring(2, 8);
					html = `<div class="math-content ${uniqueClass}">${html}</div>`;
					
					// 延迟执行MathJax渲染，使用精确的选择器
					this.$nextTick(() => {
						setTimeout(() => {
							const specificContent = document.querySelector(`.${uniqueClass}`);
							if (specificContent && window.MathJax && typeof window.MathJax.typeset === 'function') {
								try {
									// 尝试针对特定内容进行渲染
									window.MathJax.typeset([specificContent]);
									console.log(`已渲染数学公式：${uniqueClass}`);
								} catch (e) {
									console.error(`渲染特定内容失败 ${uniqueClass}:`, e);
									// 失败时尝试渲染所有内容
									this.renderMathJax();
								}
							}
						}, 100);
					});
					
					return html;
				} catch (e) {
					console.error('Markdown渲染错误:', e);
					// 确保至少显示原始内容
					return '<pre style="white-space: pre-wrap; word-break: break-word;">' + 
						text.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
				}
			},

			// 触发MathJax重新渲染
			renderMathJax() {
				// #ifdef H5
				this.$nextTick(() => {
					// 检查MathJax是否已加载
					if (window.MathJax && typeof window.MathJax.typeset === 'function') {
						try {
							console.log('MathJax已经加载，开始渲染公式...');
							// 找到所有数学内容元素
							const mathElements = document.querySelectorAll('.math-content');
							if (mathElements.length > 0) {
								// 使用MathJax重新渲染
								window.MathJax.typeset(mathElements);
								console.log('MathJax渲染完成！');
							} else {
								console.log('未找到数学内容元素');
							}
						} catch (e) {
							console.error('MathJax渲染错误:', e);
						}
					} else {
						console.log('MathJax尚未完全加载或typeset方法不可用，等待加载完成...');
						// 如果MathJax未完全加载，等待一段时间后再尝试
						setTimeout(() => {
							console.log('重试MathJax渲染...');
							if (window.MathJax && typeof window.MathJax.typeset === 'function') {
								try {
									const mathElements = document.querySelectorAll('.math-content');
									if (mathElements.length > 0) {
										window.MathJax.typeset(mathElements);
										console.log('延迟后MathJax渲染成功');
									}
								} catch (e) {
									console.error('延迟后MathJax渲染失败:', e);
								}
							} else {
								console.warn('MathJax仍未加载完成，可能需要手动刷新页面');
							}
						}, 1000); // 增加延迟时间到1000ms
					}
				});
				// #endif
			},

			// 切换标签时触发MathJax重新渲染
			changeTab(tab) {
				this.activeTab = tab;
				// 如果切换到描述标签，需要触发MathJax重新渲染
				if (tab === 'description') {
					this.$nextTick(() => {
						// 等待DOM更新后再渲染MathJax
						setTimeout(() => {
							console.log('标签切换到描述，开始渲染MathJax');
							this.renderMathJax();
						}, 100);
					});
				}
			},

			// 复制页面所有内容
			copyAllContent() {
			  try {
			    // 获取问题描述内容
			    const descriptionContent = document.querySelector('.description-content');
			    
			    if (!descriptionContent) {
			      uni.showToast({
			        title: '无内容可复制',
			        icon: 'none'
			      });
			      return;
			    }
			    
			    // 提取纯文本内容
			    let allContent = '';
			    
			    // 标题信息
			    allContent += `${this.problem.problem_no || this.problem.id}. ${this.problem.title}\n`;
			    allContent += `难度: ${this.problem.difficulty}\n`;
			    allContent += `时间限制: ${this.problem.timeLimit}\n`;
			    allContent += `内存限制: ${this.problem.memoryLimit}\n`;
			    allContent += `标签: ${this.problem.tags.join(', ')}\n\n`;
			    
			    // 题目背景
			    if (this.problem.background) {
			      allContent += `【题目背景】\n${this.problem.background}\n\n`;
			    }
			    
			    // 题目描述
			    allContent += `【题目描述】\n${this.problem.description}\n\n`;
			    
			    // 输入描述
			    allContent += `【输入】\n${this.problem.inputDesc}\n\n`;
			    
			    // 输出描述
			    allContent += `【输出】\n${this.problem.outputDesc}\n\n`;
			    
			    // 样例
			    this.problem.samples.forEach((sample, index) => {
			      allContent += `【样例 ${index + 1}】\n`;
			      allContent += `输入:\n${sample.input}\n\n`;
			      allContent += `输出:\n${sample.output}\n\n`;
			    });
			    
			    // 提示
			    if (this.problem.hint) {
			      allContent += `【提示】\n${this.problem.hint}\n\n`;
			    }
			    
			    // 来源
			    if (this.problem.source) {
			      allContent += `【来源】\n${this.problem.source}\n\n`;
			    }
			    
			    // #ifdef H5
			    const textarea = document.createElement('textarea');
			    textarea.value = allContent;
			    document.body.appendChild(textarea);
			    textarea.select();
			    document.execCommand('copy');
			    document.body.removeChild(textarea);
			    
			    uni.showToast({
			      title: '已复制全部内容到剪贴板',
			      icon: 'success',
			      duration: 2000
			    });
			    // #endif
			    
			    // #ifndef H5
			    uni.setClipboardData({
			      data: allContent,
			      success: () => {
			        uni.showToast({
			          title: '已复制全部内容到剪贴板',
			          icon: 'success'
			        });
			      }
			    });
			    // #endif
			  } catch (e) {
			    console.error('复制内容失败:', e);
			    uni.showToast({
			      title: '复制失败，请重试',
			      icon: 'none'
			    });
			  }
			},
		}
	};
</script>

<!-- CSS <style> 部分保持不变 -->
<style>
	/* --- 全局布局 --- */
	.problem-detail-container {
		display: flex;
		 flex-direction: column;
		height: 100vh;
		background-color: #f8f9fa;
		/* 默认浅色背景 */
		color: #333;
		/* 默认文字颜色 */
		transition: background-color 0.3s, color 0.3s;
	}

	.dark-mode {
		background-color: #121212;
		/* 暗黑背景 */
		color: #e0e0e0;
		/* 暗黑文字颜色 */
	}

	/* --- 自定义导航栏 --- */
	.custom-navbar {
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		background-color: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
		/* 防止导航栏被压缩 */
		position: relative;
		z-index: 10;
	}

	.dark-mode .custom-navbar {
		background-color: #1e1e1e;
		box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
		border-bottom: 1px solid #333;
	}

	.navbar-left {
		display: flex;
		align-items: center;
		overflow: hidden;
		/* 防止标题过长溢出 */
	}

	.back-button {
		display: flex;
		align-items: center;
		cursor: pointer;
		margin-right: 15px;
		font-size: 14px;
		flex-shrink: 0;
		/* 防止被压缩 */
	}

	.dark-mode .back-button {
		color: #bbb;
	}

	.back-button .iconfont {
		margin-right: 3px;
		font-size: 16px;
	}

	.problem-title {
		font-size: 17px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dark-mode .problem-title {
		color: #e0e0e0;
	}

	.navbar-right {
		display: flex;
		align-items: center;
		gap: 10px;
		/* 间距 */
		flex-shrink: 0;
		/* 防止被压缩 */
	}

	.navbar-action {
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 6px 8px;
		border-radius: 4px;
		font-size: 13px;
		transition: background-color 0.2s;
		gap: 4px;
	}

	.navbar-action:hover {
		background-color: #eee;
	}

	.dark-mode .navbar-action {
		color: #bbb;
	}

	.dark-mode .navbar-action:hover {
		background-color: #333;
	}

	.navbar-action .iconfont {
		font-size: 16px;
	}

	.theme-icon {
		font-size: 16px;
	}

	.user-avatar-container {
		position: relative;
		margin-left: 5px;
		/* 与其他按钮稍微拉开距离 */
	}

	.user-avatar {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		overflow: hidden;
		cursor: pointer;
		border: 1px solid #eee;
	}

	.dark-mode .user-avatar {
		border-color: #444;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.user-menu {
		position: absolute;
		top: calc(100% + 8px);
		/* 定位在头像下方 */
		right: 0;
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		min-width: 140px;
		border-radius: 6px;
		overflow: hidden;
		z-index: 1001;
		/* 比 navbar 高 */
		border: 1px solid #eee;
	}

	.dark-mode .user-menu {
		background-color: #252526;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
		border: 1px solid #3a3a3a;
	}

	.menu-item {
		padding: 10px 15px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.2s;
		color: #333;
		white-space: nowrap;
	}

	.menu-item:hover {
		background-color: #f5f5f5;
	}

	.dark-mode .menu-item {
		color: #ccc;
	}

	.dark-mode .menu-item:hover {
		background-color: #3e3e42;
	}

	/* --- 主内容区域 --- */
	.problem-content {
		flex: 1;
		/* 占据剩余高度 */
		display: flex;
		overflow: hidden;
		/* 防止内部滚动影响外层 */
		/* height: calc(100vh - 60px); 由 flex: 1 自动计算 */
	}

	/* --- 左侧题目信息 (60%) --- */
	.problem-info {
		width: 60%;
		height: 100%;
		/* 撑满父容器高度 */
		background-color: #fff;
		border-right: 1px solid #e0e0e0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	.dark-mode .problem-info {
		background-color: #1e1e1e;
		border-right-color: #333;
	}

	.problem-tabs {
		display: flex;
		flex-shrink: 0;
		/* 防止被压缩 */
		border-bottom: 1px solid #eee;
		background-color: #f9f9f9;
		/* Tab 背景色 */
	}

	.dark-mode .problem-tabs {
		border-bottom-color: #333;
		background-color: #252526;
		/* 暗黑 Tab 背景色 */
	}

	.tab-item {
		padding: 12px 20px;
		font-size: 14px;
		cursor: pointer;
		position: relative;
		color: #666;
		transition: color 0.2s, background-color 0.2s;
	}

	.dark-mode .tab-item {
		color: #aaa;
	}

	.tab-item.active {
		color: #007aff;
		/* 激活状态颜色 */
		font-weight: 500;
		background-color: #fff;
		/* 激活的Tab背景与内容区一致 */
	}

	.dark-mode .tab-item.active {
		color: #409eff;
		/* 暗黑激活状态颜色 */
		background-color: #1e1e1e;
	}

	/* 激活状态下划线 */
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		/* 下划线宽度 */
		max-width: 50px;
		height: 2px;
		background-color: #007aff;
	}

	.dark-mode .tab-item.active::after {
		background-color: #409eff;
	}

	.tab-content {
		flex: 1;
		/* 占据剩余空间 */
		padding: 20px;
		overflow-y: auto;
		/* 内容超出时滚动 */
		/* 平滑滚动 */
		-webkit-overflow-scrolling: touch;
	}

	.dark-mode .tab-content {
		color: #ccc;
		/* 内容文字颜色 */
	}

	/* 隐藏不需要同时显示的 tab content */
	.description-content,
	.submission-content {
		height: 100%;
		/* 确保内容区高度正确 */
	}

	.problem-header {
		margin-bottom: 20px;
	}

	.problem-meta {
		display: flex;
		gap: 20px;
		margin-bottom: 12px;
		font-size: 13px;
		color: #555;
	}

	.dark-mode .problem-meta {
		color: #999;
	}

	.meta-label {
		font-weight: 500;
		margin-right: 4px;
		color: #333;
	}

	.dark-mode .meta-label {
		color: #ccc;
	}

	.problem-tags {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.tag {
		padding: 3px 10px;
		background-color: #eef8f7;
		color: #20C0B8;
		border-radius: 12px;
		font-size: 12px;
		border: 1px solid #d6f0ef;
	}

	.dark-mode .tag {
		background-color: rgba(32, 192, 184, 0.2);
		border: 1px solid rgba(32, 192, 184, 0.3);
		color: #5fddcf;
	}

	.description-section {
		margin-bottom: 25px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 12px;
		padding-bottom: 5px;
		border-bottom: 1px solid #eee;
		color: #333;
	}

	.dark-mode .section-title {
		color: #e0e0e0;
		border-bottom-color: #333;
	}

	.section-content {
		font-size: 14px;
		line-height: 1.7;
		color: #444;
		white-space: pre-wrap;
		/* 保留换行和空格 */
		word-wrap: break-word;
		/* 长单词换行 */
	}

	/* v-html 内容中的 <pre> 标签样式 */
	.section-content pre,
	.sample-code {
		background-color: #f7f7f7;
		padding: 12px;
		border-radius: 4px;
		font-family: Menlo, Monaco, 'Courier New', monospace;
		font-size: 13px;
		line-height: 1.5;
		overflow-x: auto;
		/* 代码过长时水平滚动 */
		margin: 10px 0;
		border: 1px solid #eee;
	}

	.dark-mode .section-content {
		color: #ccc;
	}

	.dark-mode .section-content pre,
	.dark-mode .sample-code {
		background-color: #2a2a2a;
		border-color: #444;
		color: #d4d4d4;
	}

	.sample-wrapper {
		margin-bottom: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 6px;
		overflow: hidden;
	}

	.dark-mode .sample-wrapper {
		border-color: #3a3a3a;
	}

	.sample-header {
		padding: 8px 12px;
		background-color: #f5f5f5;
		font-weight: 500;
		font-size: 14px;
		color: #333;
	}

	.dark-mode .sample-header {
		background-color: #2c2c2c;
		color: #ddd;
	}

	.sample-content {
		padding: 0 12px 12px;
	}

	.sample-input,
	.sample-output {
		margin-top: 10px;
	}

	.sample-label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 500;
		margin-bottom: 6px;
		font-size: 13px;
		color: #444;
	}

	.dark-mode .sample-label {
		color: #bbb;
	}

	.copy-btn {
		font-size: 12px;
		color: #007aff;
		cursor: pointer;
		padding: 2px 6px;
		border-radius: 3px;
		background-color: rgba(0, 122, 255, 0.1);
		transition: background-color 0.2s;
	}

	.dark-mode .copy-btn {
		color: #409eff;
		background-color: rgba(64, 158, 255, 0.15);
	}

	.copy-btn:hover {
		background-color: rgba(0, 122, 255, 0.2);
	}

	.dark-mode .copy-btn:hover {
		background-color: rgba(64, 158, 255, 0.25);
	}

	/* .sample-code 已在上面与 pre 统一处理 */

	/* --- 提交记录样式 --- */
	.submission-list {
		width: 100%;
		border-collapse: collapse;
	}

	.submission-header,
	.submission-item {
		display: flex;
		width: 100%;
		font-size: 13px;
		/* 减小字体 */
		line-height: 1.5;
	}

	.submission-header {
		background-color: #f5f5f5;
		padding: 8px 0;
		/* 减小内边距 */
		font-weight: 500;
		border-radius: 4px 4px 0 0;
		color: #333;
	}

	.dark-mode .submission-header {
		background-color: #2c2c2c;
		color: #ddd;
	}

	.submission-item {
		padding: 10px 0;
		/* 减小内边距 */
		border-bottom: 1px solid #eee;
		cursor: pointer;
		transition: background-color 0.2s;
		color: #555;
	}

	.dark-mode .submission-item {
		border-bottom-color: #333;
		color: #bbb;
	}

	.submission-item:hover {
		background-color: #f9f9f9;
	}

	.dark-mode .submission-item:hover {
		background-color: #252526;
	}

	.sub-col {
		padding: 0 8px;
		/* 减小列内边距 */
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.sub-time {
		width: 22%;
	}

	.sub-status {
		width: 18%;
		font-weight: 500;
	}

	.sub-time-used,
	.sub-memory-used {
		width: 15%;
		text-align: right;
		padding-right: 15px;
	}

	/* 右对齐 */
	.sub-language {
		width: 15%;
	}

	/* 状态颜色 */
	.status-ac {
		color: #28a745;
	}

	/* 绿色 */
	.status-wa {
		color: #dc3545;
	}

	/* 红色 */
	.status-tle {
		color: #fd7e14;
	}

	/* 橙色 */
	.status-re {
		color: #6f42c1;
	}

	/* 紫色 */
	.dark-mode .status-ac {
		color: #52c41a;
	}

	.dark-mode .status-wa {
		color: #ff4d4f;
	}

	.dark-mode .status-tle {
		color: #faad14;
	}

	.dark-mode .status-re {
		color: #9254de;
	}

	/* --- 右侧代码编辑区 (40%) --- */
	.code-editor-section {
		width: 40%;
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #1e1e1e;
		border-left: 1px solid rgba(0, 0, 0, 0.1);
	}

	/* 编辑器顶部样式 - 匹配截图 */
	.editor-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		padding: 0 10px;
		background-color: #333333;
		border-bottom: 1px solid #444;
	}

	.language-selector {
		display: flex;
		align-items: center;
	}

	.language-dropdown {
		display: flex;
		align-items: center;
		gap: 5px;
		color: #fff;
		font-size: 14px;
		background-color: #393939;
		padding: 4px 10px;
		border-radius: 3px;
		cursor: pointer;
	}

	.dropdown-arrow {
		font-size: 10px;
		margin-left: 5px;
		opacity: 0.7;
	}

	.editor-actions {
		display: flex;
		align-items: center;
	}

	.editor-action-btn {
		color: #ccc;
		font-size: 18px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #393939;
		border-radius: 3px;
		margin-left: 6px;
		cursor: pointer;
	}

	/* 亮色模式下顶部样式 */
	:not(.dark-mode) .editor-header {
		background-color: #f0f0f0;
		border-bottom: 1px solid #ddd;
	}

	:not(.dark-mode) .language-dropdown {
		background-color: #e0e0e0;
		color: #333;
	}

	:not(.dark-mode) .editor-action-btn {
		background-color: #e0e0e0;
		color: #555;
	}

	/* 编辑器容器 */
	.code-editor-container {
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.code-editor {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* 完全重构的测试面板HTML布局 */
	.test-panel {
		height: 240px;  /* 稍微降低高度 */
		background-color: #1e1e1e;
		border-top: 1px solid #333;
		
		transition: height 0.25s ease;
		display: flex;
		flex-direction: column;
	}

	.test-panel.collapsed {
		height: 36px;
	}

	/* 面板头部 */
	.panel-header {
		height: 36px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		background-color: #252525;
		border-bottom: 1px solid #333;
	}

	.panel-tabs {
		display: flex;
		height: 100%;
	}

	.panel-tab {
		padding: 0 12px;
		font-size: 13px;
		color: #aaa;
		display: flex;
		align-items: center;
		height: 100%;
		cursor: pointer;
		position: relative;
	}

	.panel-tab.active {
		color: #fff;
	}

	.panel-tab.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 2px;
		background-color: #2196F3;
	}

	.panel-toggle {
		color: #aaa;
		font-size: 12px;
		cursor: pointer;
	}

	/* 测试标签 */
	.case-tabs {
		display: flex;
		padding: 8px 10px 0;
		background-color: #252525;
		border-bottom: 1px solid #333;
	}

	.case-tab {
		padding: 5px 10px;
		font-size: 12px;
		background-color: #333;
		color: #aaa;
		margin-right: 4px;
		border-radius: 4px 4px 0 0;
		cursor: pointer;
	}

	.case-tab:before {
		content: '*';
		color: #f44336;
		margin-right: 2px;
		font-weight: bold;
	}

	.case-tab.active {
		background-color: #1e1e1e;
		color: #fff;
	}

	/* 输入区域 */
	.input-area, .result-area {
		flex: 1;
		padding: 10px;
		background-color: #1e1e1e;
		overflow: auto;
	}

	.case-input-textarea {
		width: 100%;
		height: 100%;
		min-height: 100px;
		resize: none;
		border: 1px solid #444;
		outline: none;
		padding: 8px;
		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
		font-size: 13px;
		line-height: 1.5;
		background-color: #2a2a2a;
		color: #e0e0e0;
		border-radius: 4px;
	}

	/* 底部控制台 */
	.console-bar {
		height: 40px; /* 稍微增加高度 */
		display: flex;
		align-items: center;
		justify-content: space-between; /* 左右两端对齐 */
		padding: 0 10px;
		background-color: #252525;
		border-top: 1px solid #333;
		position: relative; /* 确保z-index生效 */
		z-index: 10; /* 确保显示在最上层 */
	}

	.console-label {
		display: inline-block;
		color: #aaa;
		font-size: 12px;
		padding-left: 5px;
	}

	.console-actions {
		display: flex;
		margin-left: auto;
		gap: 6px;
	}

	/* 按钮样式 */
	.run-btn, .submit-btn, .error-btn {
		padding: 4px 12px;
		font-size: 12px;
		border: none;
		border-radius: 3px;
		cursor: pointer;
		color: white;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.run-btn {
		background-color: #2196F3;
	}

	.error-btn {
		background-color: #FFA000;
	}

	.submit-btn {
		background-color: #4CAF50;
	}

	/* 亮色模式样式 */
	:not(.dark-mode) .code-editor-section {
		background-color: #f5f5f5;
	}

	:not(.dark-mode) .editor-header {
		background-color: #e8e8e8;
		border-bottom: 1px solid #ddd;
	}

	:not(.dark-mode) .language-dropdown {
		color: #333;
	}

	:not(.dark-mode) .test-panel {
		background-color: #f5f5f5;
		border-top: 1px solid #ddd;
	}

	:not(.dark-mode) .panel-header {
		background-color: #e8e8e8;
		border-bottom: 1px solid #ddd;
	}

	:not(.dark-mode) .panel-tab {
		color: #666;
	}

	:not(.dark-mode) .panel-tab.active {
		color: #1976D2;
	}

	:not(.dark-mode) .panel-tab.active:after {
		background-color: #1976D2;
	}

	:not(.dark-mode) .case-tabs {
		background-color: #e8e8e8;
		border-bottom: 1px solid #ddd;
	}

	:not(.dark-mode) .case-tab {
		background-color: #ddd;
		color: #666;
	}

	:not(.dark-mode) .case-tab.active {
		background-color: #f5f5f5;
		color: #333;
	}

	:not(.dark-mode) .input-area, :not(.dark-mode) .result-area {
		background-color: #f5f5f5;
	}

	:not(.dark-mode) .case-input-textarea {
		background-color: #fff;
		color: #333;
		border-color: #ddd;
	}

	:not(.dark-mode) .case-tab::before {
		color: #f44336; /* 保持红色星号 */
	}

	/* 折叠状态 */
	.collapsed-actions {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		padding: 0 10px;
	}

	.test-panel.collapsed .panel-toggle {
		margin-right: auto;
	}

	/* 黑夜模式适配 */
	.dark-mode .code-editor-section,
	.dark-mode .editor-header,
	.dark-mode .test-panel,
	.dark-mode .panel-header,
	.dark-mode .case-tabs,
	.dark-mode .input-area,
	.dark-mode .result-area,
	.dark-mode .console-bar {
		background-color: #1e1e1e;
		color: #e0e0e0;
		border-color: #333;
	}

	.dark-mode .editor-header {
		background-color: #333333;
		border-bottom-color: #444;
	}

	.dark-mode .language-dropdown {
		background-color: #393939;
		color: #fff;
	}

	.dark-mode .editor-action-btn {
		background-color: #393939;
		color: #ccc;
	}

	.dark-mode .panel-header,
	.dark-mode .case-tabs,
	.dark-mode .console-bar {
		background-color: #252525;
	}

	.dark-mode .case-tab {
		background-color: #333;
		color: #999;
		border: 1px solid #444;
	}

	.dark-mode .case-tab.active {
		background-color: #222;
		color: #fff;
		border-bottom-color: transparent;
	}

	.dark-mode .case-tab:hover {
		color: #ccc;
	}

	.dark-mode .case-input-textarea,
	.dark-mode .case-output-textarea {
		background-color: #2a2a2a;
		color: #e0e0e0;
		border: 1px solid #444;
	}

	/* 测试用例输入/输出区域样式 */
	.io-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.io-header {
		display: flex;
		padding: 5px 10px;
		background-color: #252525;
		border-bottom: 1px solid #333;
	}

	.io-tab {
		padding: 4px 8px;
		margin-right: 8px;
		font-size: 12px;
		cursor: pointer;
		color: #aaa;
		border-radius: 3px;
	}

	.io-tab.active {
		background-color: #393939;
		color: #fff;
	}

	.io-content {
		padding: 10px;
		padding-bottom: 50px; /* 增加底部内边距，避免按钮遮挡 */
		position: relative;
		overflow: auto;
		height: calc(100% - 36px); /* 减去io-header高度 */
	}

	.case-delete-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 0, 0, 0.1);
		color: #ff5252;
		border-radius: 50%;
		font-size: 14px;
		cursor: pointer;
		z-index: 2;
	}

	.case-delete-btn:hover {
		background-color: rgba(255, 0, 0, 0.2);
	}

	/* 美化执行结果页 */
	.result-area {
		height: 100%;
		position: relative;
		overflow: hidden; /* 防止整个区域滚动 */
		display: flex;
		flex-direction: column;
		padding-bottom: 40px; /* 为控制台预留空间 */
	}

	.result-container {
		flex: 1;
		overflow-y: auto; /* 只允许结果容器滚动 */
		display: flex;
		flex-direction: column;
	}

	/* 确保头部和指标不随内容滚动 */
	.result-header {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: inherit;
	}

	/* 控制台栏固定在底部 */
	.console-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		z-index: 100;
	}

	/* 确保内容不被底部控制台遮挡 */
	.result-metrics {
		margin-bottom: 10px;
	}

	/* 美化滚动条 */
	.result-area::-webkit-scrollbar {
		width: 8px;
	}

	.result-area::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	.result-area::-webkit-scrollbar-thumb {
		background: rgba(100, 100, 100, 0.5);
		border-radius: 4px;
	}

	.result-area::-webkit-scrollbar-thumb:hover {
		background: rgba(100, 100, 100, 0.7);
	}

	/* 确保内部卡片可以正确显示 */
	.result-card {
		margin-bottom: 10px;
		overflow: hidden; /* 防止内容溢出卡片 */
	}

	.result-card-content {
		max-height: 300px;
		overflow-y: auto;
		padding: 8px;
	}

	/* 运行状态显示 */
	.running-indicator {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.result-header.success {
		background-color: rgba(76, 175, 80, 0.1);
		border-left: 4px solid #4CAF50;
	}

	.result-header.error {
		background-color: rgba(244, 67, 54, 0.1);
		border-left: 4px solid #F44336;
	}

	.result-status-icon {
		font-size: 18px;
		margin-right: 10px;
	}

	.result-status-text {
		font-size: 14px;
		font-weight: 500;
	}

	.result-metrics {
		display: flex;
		margin-top: 15px;
		gap: 15px;
	}

	.result-metric {
		display: flex;
		flex-direction: column;
		
		align-items: center;
		padding: 8px 12px;
		background-color: #252525;
		border-radius: 4px;
		flex: 1;
	}

	.metric-value {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 2px;
		color: #64B5F6;
	}

	.metric-label {
		font-size: 12px;
		color: #aaa;
	}

	:not(.dark-mode) .io-header {
		background-color: #e8e8e8;
		border-bottom-color: #ddd;
	}

	:not(.dark-mode) .io-tab {
		color: #666;
	}

	:not(.dark-mode) .io-tab.active {
		background-color: #ccc;
		color: #333;
	}

	:not(.dark-mode) .result-card {
		background-color: #f0f0f0;
	}

	:not(.dark-mode) .result-card-header {
		background-color: #e0e0e0;
		color: #333;
	}

	:not(.dark-mode) .result-metric {
		background-color: #e8e8e8;
	}

	:not(.dark-mode) .metric-value {
		color: #1976D2;
	}

	:not(.dark-mode) .metric-label {
		color: #666;
	}

	/* 格式错误专属样式 */
	.format-error-tip {
		margin-top: 15px;
		padding: 10px;
		background-color: rgba(255, 193, 7, 0.1);
		border-left: 4px solid #FFC107;
		border-radius: 4px;
	}

	.format-error-title {
		display: flex;
		align-items: center;
		font-weight: 500;
		margin-bottom: 8px;
		color: #FFA000;
	}

	.format-error-icon {
		margin-right: 8px;
		font-size: 16px;
	}

	.format-error-content {
		font-size: 13px;
		line-height: 1.5;
		color: #aaa;
	}

	.format-error-list {
		margin-top: 5px;
		padding-left: 5px;
	}

	:not(.dark-mode) .format-error-content {
		color: #666;
	}

	/* 彻底解决黑夜模式适配问题 */
	body.dark-mode .test-panel,
	body.dark-mode .panel-header,
	body.dark-mode .case-tabs,
	body.dark-mode .io-header,
	body.dark-mode .case-input-textarea,
	body.dark-mode .console-bar,
	body.dark-mode .result-card,
	body.dark-mode .result-card-header,
	body.dark-mode .result-metric {
	  background-color: #1e1e1e;
	  color: #e0e0e0;
	  border-color: #444;
	}

	body.dark-mode .panel-header,
	body.dark-mode .io-header,
	body.dark-mode .console-bar {
	  background-color: #252525;
	}

	body.dark-mode .case-tab {
	  background-color: #333;
	  color: #aaa;
	  border: 1px solid #444;
	}

	body.dark-mode .case-input-textarea {
	  background-color: #2a2a2a;
	  border-color: #444;
	  color: #e0e0e0;
	}

	/* 确保控制台栏置于底部 */
	.test-panel {
	  display: flex;
	  flex-direction: column;
	  height: 260px;
	  position: relative;
	}

	.panel-content {
	  flex: 1;
	  overflow: hidden;
	  position: relative;
	}

	.console-bar {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 40px;
	  z-index: 100;
	  border-top: 1px solid #444;
	  background-color: #252525;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 10px;
	}

	/* 调整删除按钮样式使其更明显 */
	.case-delete-btn {
	  position: absolute;
	  top: 8px;
	  right: 8px;
	  width: 22px;
	  height: 22px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: rgba(255, 0, 0, 0.2);
	  color: #ff5252;
	  border-radius: 50%;
	  font-size: 14px;
	  cursor: pointer;
	  z-index: 10;
	  border: 1px solid rgba(255, 0, 0, 0.3);
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.case-delete-btn:hover {
	  background-color: rgba(255, 0, 0, 0.3);
	  transform: scale(1.1);
	}

	/* 输入区域调整，确保不被控制台栏遮挡 */
	.io-content {
	  position: absolute;
	  top: 36px; /* io-header高度 */
	  left: 0;
	  right: 0;
	  bottom: 40px; /* console-bar高度 */
	  padding: 10px;
	  overflow: auto;
	}

	.case-input-textarea {
	  width: 100%;
	  height: 100%;
	  resize: none;
	  border: 1px solid #444;
	  padding: 8px;
	  font-family: 'Consolas', 'Monaco', monospace;
	  font-size: 13px;
	  background-color: #2a2a2a;
	  color: #e0e0e0;
	  border-radius: 4px;
	}

	/* 确保case选项卡正确显示 */
	.case-tabs {
	  height: 36px;
	  display: flex;
	  background-color: #252525;
	  border-bottom: 1px solid #444;
	  padding: 0 5px;
	  overflow-x: auto;
	}

	.case-tab {
	  padding: 0 15px;
	  height: 36px;
	  display: flex;
	  align-items: center;
	  cursor: pointer;
	  font-size: 13px;
	  position: relative;
	  border-right: 1px solid #444;
	  white-space: nowrap;
	}

	.case-tab.active {
	  background-color: #2a2a2a;
	  color: #fff;
	}

	/* 测试用例标签中的删除按钮 */
	.case-tab-delete {
	  margin-left: 4px;
	  color: #ff5252;
	  font-weight: bold;
	  font-size: 14px;
	  opacity: 0.7;
	}

	.case-tab-delete:hover {
	  opacity: 1;
	}

	.add-tab {
	  min-width: 36px;
	  justify-content: center;
	}

	/* 消除before伪元素对add-tab的影响 */
	.add-tab:before {
	  content: none !important;
	}

	/* 运行和提交按钮样式优化 */
	.run-btn, .submit-btn {
	  height: 30px;
	  min-width: 70px;
	  padding: 0 10px;
	  font-size: 13px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: white;
	  border-radius: 4px;
	  outline: none;
	  border: none;
	  cursor: pointer;
	  margin-left: 8px;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}

	.run-btn {
	  background-color: #2196F3;
	}

	.submit-btn {
	  background-color: #4CAF50;  
	}

	.run-btn:hover, .submit-btn:hover {
	  filter: brightness(1.1);
	}

	.run-btn:active, .submit-btn:active {
	  transform: translateY(1px);
	}

	.run-btn text, .submit-btn text {
	  margin-right: 4px;
	}

	/* 卡片式测试用例布局 */
	.case-content {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	  padding-bottom: 40px; /* 控制台栏高度 */
	  position: relative;
	}

	.case-cards {
	  display: flex;
	  flex: 1;
	  gap: 10px;
	  padding: 10px;
	  overflow: auto;
	}

	.case-card {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  border-radius: 4px;
	  background-color: #252525;
	  overflow: hidden;
	  border: 1px solid #444;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}

	.case-card-header {
	  padding: 8px 12px;
	  background-color: #333;
	  border-bottom: 1px solid #444;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.card-title {
	  font-size: 12px;
	  font-weight: 500;
	  color: #e0e0e0;
	}

	.card-copy {
	  font-size: 12px;
	  color: #64B5F6;
	  cursor: pointer;
	}

	.card-copy:hover {
	  text-decoration: underline;
	}

	.case-card-body {
	  flex: 1;
	  padding: 8px;
	}

	.case-textarea {
	  width: 100%;
	  height: 100%;
	  background-color: #2a2a2a;
	  color: #e0e0e0;
	  border: none;
	  resize: none;
	  font-family: 'Consolas', 'Monaco', monospace;
	  font-size: 13px;
	  line-height: 1.5;
	  padding: 8px;
	  outline: none;
	  border-radius: 2px;
	}

	/* 亮色模式的卡片样式 */
	:not(.dark-mode) .case-card {
	  background-color: #f5f5f5;
	  border-color: #ddd;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	:not(.dark-mode) .case-card-header {
	  background-color: #e0e0e0;
	  border-bottom-color: #ddd;
	}

	:not(.dark-mode) .card-title {
	  color: #333;
	}

	:not(.dark-mode) .case-textarea {
	  background-color: #fff;
	  color: #333;
	  border: 1px solid #eee;
	}

	/* 删除按钮样式 */
	.case-delete-btn {
	  position: absolute;
	  bottom: 50px;
	  right: 10px;
	  height: 28px;
	  padding: 0 10px;
	  background-color: rgba(244, 67, 54, 0.1);
	  color: #ff5252;
	  border: 1px solid rgba(244, 67, 54, 0.3);
	  border-radius: 4px;
	  font-size: 12px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  transition: all 0.2s ease;
	  z-index: 20;
	}

	.case-delete-btn:hover {
	  background-color: rgba(244, 67, 54, 0.2);
	}

	/* 修复选项卡在深色和浅色模式下的样式 */
	.case-tabs {
	  display: flex;
	  background-color: #252525;
	  border-bottom: 1px solid #444;
	  padding: 0 5px;
	  overflow-x: auto;
	  flex-wrap: nowrap;
	  height: 36px;
	}

	:not(.dark-mode) .case-tabs {
	  background-color: #f0f0f0;
	  border-bottom-color: #ddd;
	}

	.case-tab {
	  padding: 0 12px;
	  height: 36px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  font-size: 13px;
	  position: relative;
	  color: #aaa;
	  white-space: nowrap;
	}

	.case-tab::before {
	  content: "*";
	  color: #ff5252;
	  margin-right: 4px;
	  font-weight: bold;
	}

	.case-tab.active {
	  background-color: #2d2d2d;
	  color: #fff;
	}

	.add-tab::before {
	  content: none;
	}

	:not(.dark-mode) .case-tab {
	  color: #666;
	}

	:not(.dark-mode) .case-tab.active {
	  background-color: #e8e8e8;
	  color: #333;
	}

	/* 修复黑夜模式和内容显示问题 */

	/* 确保所有卡片样式在黑夜模式下正确显示 */
	.dark-mode .case-card,
	.test-panel.dark-mode .case-card {
	  background-color: #252525;
	  border-color: #444;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}

	.dark-mode .case-card-header,
	.test-panel.dark-mode .case-card-header {
	  background-color: #333;
	  border-bottom-color: #444;
	}

	.dark-mode .card-title,
	.test-panel.dark-mode .card-title {
	  color: #e0e0e0;
	}

	.dark-mode .card-copy,
	.test-panel.dark-mode .card-copy {
	  color: #64B5F6;
	}

	.dark-mode .case-textarea,
	.test-panel.dark-mode .case-textarea {
	  background-color: #2a2a2a;
	  color: #e0e0e0;
	  border: none;
	}

	/* 修复内容显示问题 */
	.case-cards {
	  display: flex;
	  height: calc(100% - 60px); /* 减去选项卡和底部空间 */
	  min-height: 120px; /* 确保最小高度 */
	  padding: 10px;
	  padding-bottom: 50px; /* 为控制台留出空间 */
	  gap: 10px;
	  overflow: auto;
	}

	.case-textarea {
	  min-height: 80px;
	  height: 100%;
	  width: 100%;
	  padding: 8px;
	  box-sizing: border-box;
	}

	/* 确保控制台栏始终显示在底部 */
	.console-bar {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 40px;
	  background-color: #252525;
	  z-index: 100;
	}

	/* 确保黑夜模式下标签页正确显示 */
	.dark-mode .case-tabs,
	.test-panel.dark-mode .case-tabs {
	  background-color: #252525;
	  border-bottom-color: #444;
	}

	.dark-mode .case-tab,
	.test-panel.dark-mode .case-tab {
	  color: #aaa;
	  border-color: #444;
	}

	.dark-mode .case-tab.active,
	.test-panel.dark-mode .case-tab.active {
	  background-color: #333;
	  color: #fff;
	}

	/* 更简洁明了的卡片布局 */
	.case-card {
	  display: flex;
	  flex-direction: column;
	  flex: 1;
	  height: 100%;
	  border-radius: 4px;
	  overflow: hidden;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.case-card-body {
	  flex: 1;
	  padding: 8px;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	}

	/* 强制应用样式，确保黑夜模式能覆盖默认样式 */
	body .dark-mode .case-card-header, 
	body .test-panel.dark-mode .case-card-header {
	  background-color: #333 !important;
	  color: #e0e0e0 !important;
	}

	body .dark-mode .case-card, 
	body .test-panel.dark-mode .case-card {
	  background-color: #252525 !important;
	}

	body .dark-mode .case-textarea, 
	body .test-panel.dark-mode .case-textarea {
	  background-color: #2a2a2a !important;
	  color: #e0e0e0 !important;
	}

	/* 解决执行结果滚动问题的最小化修改 */

	/* 确保测试面板有固定高度并正确处理内容溢出 */
	.test-panel {
	  display: flex;
	  flex-direction: column;
	  height: calc(100% - 40px); /* 减去导航栏高度 */
	  position: relative;
	}

	/* 确保面板内容区域可以正确显示 */
	.panel-content {
	  flex: 1;
	  display: flex;
	  overflow: hidden; /* 阻止面板内容本身滚动 */
	}

	/* 让case-content和result-area占据全部可用空间 */
	.case-content, .result-area {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  overflow: hidden; /* 防止自身滚动 */
	}

	/* 让结果容器在result-area内正确布局 */
	.result-container {
	  display: flex;
	  flex-direction: column;
	  height: calc(100% - 40px); /* 减去控制台高度 */
	  overflow-y: auto; /* 只让结果容器滚动 */
	  padding: 10px;
	}

	/* 确保控制台栏固定在底部 */
	.console-bar {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 40px;
	  z-index: 10;
	  border-top: 1px solid #444;
	}

	/* 给结果卡片添加足够的边距,防止被控制台遮挡 */
	.result-card:last-child {
	  margin-bottom: 40px;
	}

	/* 性能指标应该在内容的最下方 */
	.result-metrics {
	  margin-top: 10px;
	  margin-bottom: 50px; /* 为控制台留出空间 */
	}

	/* 修复格式错误提示的位置 */
	.format-error-tip {
	  margin-bottom: 40px; /* 为控制台留出空间 */
	}

	.no-result-indicator {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 测试面板高度控制 */
	.test-panel {
	  display: flex;
	  flex-direction: column;
	  height: 30%; /* 限制高度为代码编辑区的30% */
	  min-height: 200px; /* 最小高度 */
	  max-height: 300px; /* 最大高度 */
	  position: relative;
	  border-top: 1px solid #444;
	}

	/* 确保面板内容适应高度 */
	.panel-content {
	  flex: 1;
	  overflow: hidden;
	}

	/* 执行结果区域样式修复 */
	.result-area {
	  height: 100%;
	  position: relative;
	  overflow: hidden;
	}

	/* 使结果容器可滚动 */
	.result-container {
	  height: 100%;
	  overflow-y: auto;
	  padding: 10px;
	  padding-bottom: 40px; /* 为控制台留出空间 */
	}

	/* 无结果时的提示居中显示 */
	.no-result-indicator {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	  color: #aaa;
	  font-size: 14px;
	}

	/* 确保控制台位置正确 */
	.console-bar {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 40px;
	  background-color: #252525;
	  z-index: 10;
	}

	/* 提升结果卡片的紧凑性 */
	.result-card {
	  margin-bottom: 10px;
	}

	.result-card-content {
	  max-height: 150px;
	  overflow-y: auto;
	}

	/* 修复运行指示器样式 */
	.running-indicator {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	  color: #aaa;
	  font-size: 14px;
	}

	/* 提交详情模态框样式 */
	.submission-modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	  z-index: 1000;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.submission-modal {
	  width: 80%;
	  max-width: 900px;
	  max-height: 80vh;
	  background-color: #fafafa;
	  border-radius: 8px;
	  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	  display: flex;
	  flex-direction: column;
	}

	.dark-mode .submission-modal {
	  background-color: #252525;
	  color: #e0e0e0;
	}

	.modal-header {
	  padding: 16px 20px;
	  border-bottom: 1px solid #e0e0e0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.dark-mode .modal-header {
	  border-bottom-color: #444;
	}

	.modal-title {
	  font-size: 18px;
	  font-weight: 500;
	}

	.modal-close {
	  font-size: 24px;
	  cursor: pointer;
	  color: #666;
	  width: 32px;
	  height: 32px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	}

	.modal-close:hover {
	  background-color: rgba(0, 0, 0, 0.05);
	}

	.dark-mode .modal-close {
	  color: #aaa;
	}

	.dark-mode .modal-close:hover {
	  background-color: rgba(255, 255, 255, 0.1);
	}

	.modal-content {
	  padding: 20px;
	  overflow-y: auto;
	  max-height: calc(80vh - 60px);
	}

	/* 提交状态和元信息 */
	.submission-info {
	  display: flex;
	  align-items: flex-start;
	  margin-bottom: 20px;
	}

	.submission-status {
	  padding: 6px 12px;
	  border-radius: 4px;
	  font-weight: 500;
	  margin-right: 16px;
	}

	.submission-meta {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px 20px;
	}

	.meta-item {
	  display: flex;
	  align-items: center;
	}

	.meta-label {
	  color: #666;
	  margin-right: 6px;
	  font-size: 14px;
	}

	.dark-mode .meta-label {
	  color: #aaa;
	}

	/* 测试点通过情况 */
	.test-cases-summary {
	  margin-bottom: 24px;
	  padding: 16px;
	  background-color: #f5f5f5;
	  border-radius: 6px;
	}

	.dark-mode .test-cases-summary {
	  background-color: #333;
	}

	.test-cases-header {
	  font-weight: 500;
	  margin-bottom: 12px;
	}

	.test-cases-progress {
	  display: flex;
	  align-items: center;
	  margin-bottom: 16px;
	}

	.progress-bar {
	  flex: 1;
	  height: 8px;
	  background-color: #e0e0e0;
	  border-radius: 4px;
	  overflow: hidden;
	  margin-right: 10px;
	}

	.dark-mode .progress-bar {
	  background-color: #444;
	}

	.progress-fill {
	  height: 100%;
	  background-color: #4CAF50;
	  border-radius: 4px;
	}

	.progress-text {
	  font-size: 14px;
	  font-weight: 500;
	}

	.test-cases-list {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	  gap: 10px;
	}

	.test-case-item {
	  padding: 10px;
	  border-radius: 4px;
	  background-color: #fff;
	  border: 1px solid #e0e0e0;
	  display: flex;
	  flex-direction: column;
	}

	.dark-mode .test-case-item {
	  background-color: #2a2a2a;
	  border-color: #444;
	}

	.test-case-item.passed {
	  border-color: #4CAF50;
	}

	.dark-mode .test-case-item.passed {
	  border-color: #2E7D32;
	}

	.case-number {
	  font-weight: 500;
	  font-size: 14px;
	  margin-bottom: 4px;
	}

	.case-status {
	  color: #F44336;
	  font-size: 13px;
	}

	.test-case-item.passed .case-status {
	  color: #4CAF50;
	}

	.case-reason {
	  font-size: 12px;
	  color: #757575;
	  margin-top: 4px;
	}

	.dark-mode .case-reason {
	  color: #bbb;
	}

	/* 代码显示 */
	.submission-code {
	  border: 1px solid #e0e0e0;
	  border-radius: 6px;
	  overflow: hidden;
	}

	.dark-mode .submission-code {
	  border-color: #444;
	}

	.code-header {
	  padding: 10px 16px;
	  background-color: #f0f0f0;
	  border-bottom: 1px solid #e0e0e0;
	  font-weight: 500;
	}

	.dark-mode .code-header {
	  background-color: #333;
	  border-bottom-color: #444;
	}

	.code-container {
	  padding: 0;
	  max-height: 400px;
	  overflow-y: auto;
	  background-color: #fafafa;
	}

	.dark-mode .code-container {
	  background-color: #1e1e1e;
	}

	.code-container pre {
	  margin: 0;
	  padding: 16px;
	  font-family: 'Consolas', 'Monaco', monospace;
	  font-size: 14px;
	  line-height: 1.5;
	  tab-size: 4;
	}

	.dark-mode .code-container pre {
	  color: #e0e0e0;
	}

	/* 状态颜色 */
	.status-accepted {
	  background-color: rgba(76, 175, 80, 0.1);
	  color: #2E7D32;
	}

	.status-wrong-answer {
	  background-color: rgba(244, 67, 54, 0.1);
	  color: #C62828;
	}

	.status-time-limit-exceeded {
	  background-color: rgba(255, 152, 0, 0.1);
	  color: #E65100;
	}

	.status-memory-limit-exceeded {
	  background-color: rgba(156, 39, 176, 0.1);
	  color: #7B1FA2;
	}

	.status-runtime-error {
	  background-color: rgba(33, 150, 243, 0.1);
	  color: #1565C0;
	}

	.status-compilation-error {
	  background-color: rgba(0, 0, 0, 0.1);
	  color: #424242;
	}

	.dark-mode .status-compilation-error {
	  background-color: rgba(255, 255, 255, 0.1);
	  color: #bdbdbd;
	}

	/* 数学公式样式 */
	.math {
	  font-family: 'Times New Roman', Times, serif;
	  font-style: italic;
	  background-color: #f9f9f9;
	  padding: 0 5px;
	  border-radius: 3px;
	}

	.math-block {
	  font-family: 'Times New Roman', Times, serif;
	  font-style: italic;
	  text-align: center;
	  background-color: #f9f9f9;
	  padding: 10px;
	  margin: 10px 0;
	  border-radius: 5px;
	  border-left: 3px solid #20C0B8;
	}

	.dark-mode .math,
	.dark-mode .math-block {
	  background-color: #2a2a2a;
	  color: #e0e0e0;
	}

	/* Markdown样式增强 */
	pre {
	  background-color: #f5f5f5;
	  border-radius: 5px;
	  padding: 12px;
	  margin: 15px 0;
	  overflow-x: auto;
	  border-left: 3px solid #20C0B8;
	  font-size: 15px;
	}

	.dark-mode pre {
	  background-color: #2a2a2a;
	  border-left-color: #20C0B8;
	}

	code {
	  font-family: Consolas, Monaco, 'Andale Mono', monospace;
	  background-color: #f0f0f0;
	  padding: 3px 5px;
	  border-radius: 4px;
	  font-size: 15px;
	}

	.dark-mode code {
	  background-color: #333;
	  color: #e0e0e0;
	}

	pre code {
	  background-color: transparent;
	  padding: 0;
	  font-size: 15px;
	  line-height: 1.5;
	}

	.dark-mode pre code {
	  background-color: transparent;
	  color: #e0e0e0;
	}

	/* 引用样式 */
	blockquote {
	  border-left: 4px solid #20C0B8;
	  margin: 15px 0;
	  padding: 10px 15px;
	  background-color: #f9f9f9;
	  font-style: italic;
	  color: #555;
	  font-size: 16px;
	}

	.dark-mode blockquote {
	  background-color: #2a2a2a;
	  color: #aaa;
	  border-left-color: #20C0B8;
	}

	/* 描述部分字体大小增大 */
	.description-section .section-content {
	  font-size: 16px;
	  line-height: 1.6;
	}

	.description-section .section-title {
	  font-size: 18px;
	  font-weight: bold;
	  margin-bottom: 12px;
	}

	.description-section p {
	  margin-bottom: 16px;
	}

	/* 数学公式样式 */
	.math, .math-block {
	  font-family: 'Cambria Math', 'Times New Roman', Times, serif;
	  font-size: 18px;
	  background-color: #f8f9fa;
	  color: #d32f2f;
	  border-radius: 4px;
	  white-space: pre-wrap;
	  word-break: break-word;
	  line-height: 1.5;
	  padding: 4px 8px;
	  margin: 2px 0;
	  font-weight: 500;
	}

	.math-block {
	  display: block;
	  margin: 15px 0;
	  padding: 12px 16px;
	  text-align: center;
	  border-left: 4px solid #20C0B8;
	  background-color: #f0f8ff;
	}

	.dark-mode .math,
	.dark-mode .math-block {
	  background-color: #2d2d2d;
	  color: #ff9800;
	  border-color: #20C0B8;
	}

	/* 样例字体也增大 */
	.sample-code {
	  font-size: 16px;
	  line-height: 1.5;
	}

	.sample-label {
	  font-size: 16px;
	}

	/* 提升数学公式样式 */
	.katex-display {
	  overflow-x: auto;
	  overflow-y: hidden;
	  padding: 10px 0;
	  margin: 0.5em 0;
	}

	.katex {
	  font-size: 1.2em;
	}

	.katex-error {
	  color: #f44336;
	  background-color: rgba(244, 67, 54, 0.1);
	  padding: 2px 4px;
	  border-radius: 4px;
	}

	/* 自定义数学区块备用样式 */
	.math-block {
	  display: block;
	  overflow-x: auto;
	  padding: 15px;
	  margin: 15px 0;
	  text-align: center;
	  background-color: #f6f8fa;
	  border-left: 4px solid #20C0B8;
	  font-family: 'KaTeX_Math', 'Times New Roman', Times, serif;
	  font-size: 1.1em;
	  line-height: 1.5;
	  white-space: pre-wrap;
	  color: #d32f2f;
	}

	.math {
	  font-family: 'KaTeX_Math', 'Times New Roman', Times, serif;
	  background-color: #f8f9fa;
	  border-radius: 4px;
	  padding: 0 4px;
	  color: #d32f2f;
	  font-weight: 500;
	}

	.dark-mode .math-block {
	  background-color: #282c34;
	  border-left-color: #20C0B8;
	  color: #ff9800;
	}

	.dark-mode .math {
	  background-color: #282c34;
	  color: #ff9800;
	}

	.dark-mode .katex-display {
	  color: #e0e0e0;
	}

	/* 改进代码显示 */
	pre {
	  background-color: #f6f8fa;
	  border-radius: 5px;
	  padding: 12px 16px;
	  margin: 15px 0;
	  overflow-x: auto;
	}

	.dark-mode pre {
	  background-color: #282c34;
	}

	/* 数学公式样式优化 */
	.math-block {
	  display: block;
	  padding: 15px;
	  margin: 15px 0;
	  text-align: center;
	  background-color: #f6f8fa;
	  border-left: 4px solid #20C0B8;
	  font-family: 'Cambria Math', 'KaTeX_Math', 'Times New Roman', Times, serif;
	  font-size: 20px;
	  line-height: 1.5;
	  white-space: pre-wrap;
	  overflow-x: auto;
	  color: #d32f2f;
	  font-weight: 500;
	}

	.math {
	  font-family: 'Cambria Math', 'KaTeX_Math', 'Times New Roman', Times, serif;
	  background-color: #f8f9fa;
	  border-radius: 4px;
	  padding: 0 4px;
	  margin: 0 2px;
	  color: #d32f2f;
	  font-size: 18px;
	  font-weight: 500;
	}

	/* 暗黑模式的公式样式 */
	.dark-mode .math-block {
	  background-color: #282c34;
	  border-left-color: #20C0B8;
	  color: #ff9800;
	}

	.dark-mode .math {
	  background-color: #282c34;
	  color: #ff9800;
	}

	/* 添加KaTeX相关样式 */
	.katex-html {
		display: none;
	}

	.katex {
		font-size: 1.21em !important;
		font-family: 'KaTeX_Math', 'Times New Roman', Times, serif !important;
		line-height: 1.5;
	}

	.katex-display {
		overflow-x: auto;
		overflow-y: hidden;
		padding: 10px !important;
		margin: 15px 0 !important;
		text-align: center;
		background-color: #f6f8fa;
		border-left: 4px solid #20C0B8;
	}

	.dark-mode .katex-display {
		background-color: #282c34;
		border-left-color: #20C0B8;
	}

	/* 备用公式样式 */
	.math-block {
		display: block;
		overflow-x: auto;
		padding: 15px;
		margin: 15px 0;
		text-align: center;
		background-color: #f6f8fa;
		border-left: 4px solid #20C0B8;
		font-family: 'KaTeX_Math', 'Times New Roman', Times, serif;
		font-size: 1.1em;
		line-height: 1.5;
		white-space: pre-wrap;
		color: #d32f2f;
	}

	.math {
		font-family: 'KaTeX_Math', 'Times New Roman', Times, serif;
		background-color: #f8f9fa;
		border-radius: 4px;
		padding: 0 4px;
		color: #d32f2f;
		font-weight: 500;
	}

	.dark-mode .math-block {
		background-color: #282c34;
		border-left-color: #20C0B8;
		color: #ff9800;
	}

	.dark-mode .math {
		background-color: #282c34;
		color: #ff9800;
	}

	/* 数学公式样式 - 简化版本 */
	.math-block {
	  display: block;
	  padding: 15px;
	  margin: 15px 0;
	  text-align: center;
	  background-color: #f6f8fa;
	  border-left: 4px solid #20C0B8;
	  font-family: monospace;
	  font-size: 16px;
	  line-height: 1.5;
	  white-space: pre-wrap;
	  word-break: break-word;
	  overflow-x: auto;
	  color: #333;
	}

	.math {
	  font-family: monospace;
	  background-color: #f8f9fa;
	  border-radius: 4px;
	  padding: 1px 4px;
	  margin: 0 2px;
	  color: #333;
	  font-style: normal;
	  font-size: 16px;
	}

	.dark-mode .math-block {
	  background-color: #282c34;
	  border-left-color: #20C0B8;
	  color: #ddd;
	}

	.dark-mode .math {
	  background-color: #282c34;
	  color: #ddd;
	}

	/* MathJax样式 */
	.math-content {
	  font-size: 1rem;
	  line-height: 1.6;
	}

	/* MathJax渲染的公式容器 */
	.MathJax {
	  overflow-x: auto;
	  overflow-y: hidden;
	  max-width: 100%;
	}

	/* 块级公式一般用.MJX-display标记 */
	.MJX-display {
	  overflow-x: auto;
	  overflow-y: hidden;
	  margin: 1em 0;
	  padding: 8px 0;
	  background-color: #f8f9fa;
	  border-left: 4px solid #20C0B8;
	  padding-left: 15px;
	}

	/* 暗黑模式下的MathJax样式 */
	.dark-mode .MJX-display {
	  background-color: #282c34;
	  border-left-color: #20C0B8;
	}

	/* 确保所有内容可复制 */
	.problem-content, .section-content, .math-content, .description-section, .sample-code, 
	.sample-input, .sample-output, .sample-wrapper, .result-container, .submission-code {
	  user-select: text !important;
	  -webkit-user-select: text !important;
	  -moz-user-select: text !important;
	  -ms-user-select: text !important;
	}

	/* 添加全局复制按钮 */
	.copy-all-btn {
	  position: fixed;
	  right: 20px;
	  top: 70px;
	  background-color: #007aff;
	  color: white;
	  padding: 8px 12px;
	  border-radius: 4px;
	  font-size: 14px;
	  z-index: 100;
	  cursor: pointer;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}

	.dark-mode .copy-all-btn {
	  background-color: #409eff;
	}

	.copy-all-btn:hover {
	  opacity: 0.9;
	}

	.copy-all-btn:active {
	  transform: translateY(1px);
	}
	
	/* Markdown内联代码样式 */
	.section-content code {
	  background-color: rgba(27, 31, 35, 0.05);
	  padding: 3px 5px;
	  border-radius: 3px;
	  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
	  font-size: 14px;
	  color: #d14;
	  border: 1px solid #eaeaea;
	  white-space: nowrap;
	}
	
	.dark-mode .section-content code {
	  background-color: rgba(220, 220, 220, 0.1);
	  border-color: #555;
	  color: #e83e8c;
	}
	
	/* 数学公式容器中的代码不应用上面的样式 */
	.mjx-container code, 
	.katex code {
	  background-color: transparent;
	  padding: 0;
	  border: none;
	  color: inherit;
	}
	
	/* 代码块样式（防止与内联代码冲突） */
	.section-content pre code {
	  display: block;
	  padding: 12px;
	  overflow-x: auto;
	  white-space: pre;
	  background-color: #f6f8fa;
	  border: 1px solid #eaecef;
	  border-radius: 6px;
	  color: #333;
	  line-height: 1.45;
	}
	
	.dark-mode .section-content pre code {
	  background-color: #282c34;
	  border-color: #444;
	  color: #abb2bf;
	}
	
	/* 样例代码显示，保留换行和空格 */
	.sample-code {
	  white-space: pre-wrap;
	  word-break: break-word;
	  font-family: Menlo, Monaco, 'Courier New', monospace;
	  line-height: 1.5;
	  font-size: 14px;
	  background-color: #f7f7f7;
	  padding: 12px;
	  border-radius: 4px;
	  overflow-x: auto;
	  margin: 10px 0;
	  border: 1px solid #eee;
	}
	
	.dark-mode .sample-code {
	  background-color: #2a2a2a;
	  border-color: #444;
	  color: #d4d4d4;
	}
	
	/* 图片自适应样式 */
	.section-content img,
	.math-content img {
	  max-width: 100%;
	  height: auto;
	  border-radius: 4px;
	  display: block;
	  margin: 10px auto;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.dark-mode .section-content img,
	.dark-mode .math-content img {
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	  filter: brightness(0.9);
	}
	
	/* SVG图片特别处理 */
	.section-content svg,
	.math-content svg {
	  max-width: 100%;
	  height: auto;
	  display: block;
	  margin: 10px auto;
	}
	
	/* Markdown内联代码样式 */
	.section-content code {
	  background-color: rgba(27, 31, 35, 0.05);
	  padding: 3px 5px;
	  border-radius: 3px;
	  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
	  font-size: 14px;
	  color: #d14;
	  border: 1px solid #eaeaea;
	  white-space: nowrap;
	}
	
	.dark-mode .section-content code {
	  background-color: rgba(220, 220, 220, 0.1);
	  border-color: #555;
	  color: #e83e8c;
	}
	
	/* 数学公式容器中的代码不应用上面的样式 */
	.mjx-container code, 
	.katex code {
	  background-color: transparent;
	  padding: 0;
	  border: none;
	  color: inherit;
	}
	
	/* 代码块样式（防止与内联代码冲突） */
	.section-content pre code {
	  display: block;
	  padding: 12px;
	  overflow-x: auto;
	  white-space: pre;
	  background-color: #f6f8fa;
	  border: 1px solid #eaecef;
	  border-radius: 6px;
	  color: #333;
	  line-height: 1.45;
	}
	
	.dark-mode .section-content pre code {
	  background-color: #282c34;
	  border-color: #444;
	  color: #abb2bf;
	}
</style>